精华内容
下载资源
问答
  • element-ui实现菜单路由切换

    千次阅读 2018-08-02 12:12:05
    <template> <div> <ul> <el-menu unique-opened :default-active="...-- router 使用路由切换--> <el-submenu index="1">
    <template>
      <div>
        <ul>
          <el-menu unique-opened :default-active="pagedefault" router> <!-- router 使用路由切换-->
           <el-submenu index="1">
                        <template slot="title"><i class="navicon nav-1"></i>概况图</template>
                        <el-menu-item index="index">主控台(假菜单)</el-menu-item>
                    </el-submenu>
                    <el-submenu index="2">
                        <template slot="title"><i class="navicon nav-2"></i>业务中心</template>
                        <el-menu-item index="list">电子印章申请</el-menu-item>
                        <el-menu-item index="data">电子印章续费申请</el-menu-item>
                        <el-menu-item index="">电子印章补办申请</el-menu-item>
                        <el-menu-item index="">电子印章挂失申请</el-menu-item>
                        <el-menu-item index="">电子印章变更申请</el-menu-item>
                        <el-menu-item index="">电子印章注销申请</el-menu-item>
                    </el-submenu>
                    <el-submenu index="3">
                        <template slot="title"><i class="navicon nav-3"></i>生产中心</template>
                        <el-menu-item index="">电子印章制作</el-menu-item>
                        <el-menu-item index="">电子印章续期</el-menu-item>
                        <el-menu-item index="">电子印章补办</el-menu-item>
                        <el-menu-item index="">电子印章挂失</el-menu-item>
                        <el-menu-item index="">电子印章变更</el-menu-item>
                        <el-menu-item index="">电子印章注销</el-menu-item>
                    </el-submenu>
                    <el-submenu index="4">
                        <template slot="title"><i class="navicon nav-4"></i>后台管理</template>
                        <el-menu-item index="">组织架构维护</el-menu-item>
                        <el-menu-item index="">用户管理</el-menu-item>
                        <el-menu-item index="">角色配置</el-menu-item>
                    </el-submenu>
                    <el-submenu index="5">
                        <template slot="title"><i class="navicon nav-5"></i>审核中心</template>
                        <el-menu-item index="">订单审核</el-menu-item>
                        <el-menu-item index="">代理商审核</el-menu-item>
                        <el-menu-item index="">实名审核</el-menu-item>
                    </el-submenu>
          </el-menu>
        </ul>
      </div>
    </template>
    
    <script>
        export default {
            name: "navigation",
          data(){
              return {
                pagedefault: "",
              }
          },
          watch: {
            $route() {
              debugger
              if (this.$route.meta.parentPath) {
                this.pagedefault = this.$route.meta.parentPath; // 实现路由切换
              }
            }
          },
          methods:{
            // handleOpen(key, keyPath) {
            //   console.log(key, keyPath);
            // },
            // handleClose(key, keyPath) {
            //   console.log(key, keyPath);
            // }
          }
        }
    </script>
    
    <style >
      .is-opened .el-submenu__title{
        background: #BFDFFA;
        color: #00afff;
        padding-left: 12px !important;
      }
    </style>
    

     

    展开全文
  • jeecgboot平台一级菜单切换二级菜单路由不刷新,没有重新加载页面,导致数据无法正常展示问题
  • 主要介绍了Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
  • 实现效果:使用的是一级菜单(类似Tab栏切换)使用路由进行组件的跳转,这里只有路由跳转的代码,不包含样式 HTML结构:router是element导航菜单中的属性,实现路由跳转,再用:index来绑定跳转的路径(记得要拼接...

    实现效果:使用的是一级菜单(类似Tab栏切换)使用路由进行组件的跳转,这里只有路由跳转的代码,不包含样式
    在这里插入图片描述
    HTML结构:router是element导航菜单中的属性,实现路由跳转,再用:index来绑定跳转的路径(记得要拼接一个 ‘/’ )

    <el-container>
      <el-header style="height:35px">
        <el-menu class="el-menu-demo"
                 mode="horizontal"
                 active-text-color='#39f'
                 router>
          <el-menu-item :index="'/' + item.path"
                        v-for="item in menulist"
                        :key="item.id">{{item.authName}}</el-menu-item>
        </el-menu>
      </el-header>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
    

    这是我写的菜单假数据

    <script>
    export default {
      data () {
        return {
          menulist: [
            { id: 1, authName: '统计总览', path: 'detector-stat/stat-overview' },
            { id: 2, authName: '终端报表统计', path: 'detector-stat/stat-detectorview' }
          ]
        }
      }
    
    }
    </script>
    

    router在路由配置文件中:

    import Vue from 'vue'
    import VueRouter from 'vue-router'
    import Login from '../views/Login.vue'
    import Home from '../views/Home.vue'
    import StatOverview from '../components/detector-stat/stat-overview.vue'
    import StatDetectorview from '../components/detector-stat/stat-detectorview.vue'
    
    Vue.use(VueRouter)
    
    // const routes = [
    // ]
    
    const router = new VueRouter({
        routes: [
            { path: '/', redirect: '/login' },
            { path: '/login', component: Login },
            {
                path: '/home',
                component: Home,
                children: [
                    { path: '/detector-stat/stat-overview', component: StatOverview },
                    { path: '/detector-stat/stat-detectorview', component: StatDetectorview }
                ]
            }
        ]
    })
    
    export default router
    
    展开全文
  • vue2.0使用嵌套路由实现页面跳转/一级菜单切换/routes配置children demo需求分析: 图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在菜单下区域加载相应组件的内容。 以下两图分别为点击“我...

    vue2.0使用嵌套路由实现页面跳转切换/公用一级菜单控制页面内容切换/routes配置children

    demo需求分析:

    图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在菜单下区域加载相应组件的内容。

    以下两图分别为点击“我的电站”、“个人中心”的效果

    demo结构介绍:

    登录成功后,跳转到index页面,并默认显示index/UserStation(我的电站),index为一个组件,其他各个子菜单为一个组件,公共header为一个组件。


    路由配置代码:




    header组件关键代码:

    基于Element-ui(只需要留意红框部分):Element-ui知识请参考Element-ui官网,handleSelect函数调用时,告知父组件props中的active已经更新。



    index.vue

    解释:index.vue中引用header组件,并向header组件传入active,此active在子组件中需要被修改,因此需要使用.sync实现props在header组件与index组件中共享,.sync相关知识可查询vuejs官网。

    router-view用于挂载匹配到的路由组件(比如:UserStation的内容)。

    观察active的变化,当active变化时,push active的值到路由中,路由匹配到实现页面切换。


    注:登录成功时this.$router.push('/Index/UserStation'),所以进入index.vue时,默认显示我的电站菜单选项,路由默认为Index/UserStation。

    展开全文
  • 使用element-ui的NavMenu导航菜单时发现一个问题,当在二级页面通过事件使用$router.push('/article')方法切回到article页面时,导航菜单无法正确显示当前页面的菜单项,还依旧停留在上个页面 问题解决: 从官网发现,该...

    问题说明

    使用element-ui的NavMenu导航菜单时发现一个问题,当在二级页面通过事件使用$router.push('/article')方法切回到article页面时,导航菜单无法正确显示当前页面的菜单项,还依旧停留在上个页面

    问题解决:

    从官网发现,该属性可以解决这个问题

    在el-menu标签中添加该属性,并绑定该属性值为跳转页面的哈希值,从而实现当前页面的菜单激活

    ok,问题解决,over

    展开全文
  • 主要介绍了vuejs 切换导航条高亮路由高亮的方法示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • 效果截图 创建页面 修改router.js文件 添加路由
  • ant design vue导航菜单路由配置

    万次阅读 2019-04-28 10:31:03
    1.根据动态路由自动展开与自动选择对应路由所在页面菜单 2.只展开一个子菜单 3.兄弟组件控制菜单路由 <a-menu :openKeys="openKeys" :selectedKeys="selectedKeys" mode="inline" theme="dark" :inl...
  • 那么想实现路由切换title变换可以通过vue-router的导航守卫来实现,最简单的的目录结构可如下所示 ├── index.html ├── main.js ├── api │ └── ... # 抽取出API请求 ├── common │ └── constants...
  • vue2.0使用嵌套路由实现页面跳转切换/公用一级菜单控制页面内容切换/routes配置childrendemo需求分析:图中菜单区域为header公用组件,点击相应的菜单选项跳转到对应的路由,在菜单下区域加载相应组件的内容。...
  • 路由进行切换结果 这时候会发现input标签的value值并没有随着路由的改变而改变。并没有更新 二、解决方案① 给”key”>增加一个不同:key值,这样vue就会识别这是不同的了。 在路由进行切换结果 这时候...
  • 场景:项目中需要用到webscoket 推送过来的信息 点击信息按钮 跳转到指定的页面 路由改变了 可是菜单还是上一次的菜单高亮 elementUI 里面有个属性  通过设置这两个属性实现激活菜单的颜色 active-text-...
  • 本文实例讲述了AngularJS实现使用路由切换视图的方法。分享给大家供大家参考,具体如下: 下面是一个简单的学生信息管理实例。 注意:除了引用angular.js之外,还要引用angular-route.js。 1、创建index.html主视图 ...
  • 一、地路由文件index.js中 , 先配置一个初始路由列表,就是未登陆也能访问的页面,并加入到router中 let initMenu = [ { path: '/', redirect: '/login' }, { path: '/login', name: 'login', component: ...
  • 效果是切换左侧菜单,对应切换右侧内容 index.vue首页布局: 左侧菜单展开内容示例: 所以,实现这个效果的办法就是: <router-link to=" "></router-link> <router-view></router-...
  • $route 获取到的是当前页的参数; 给Tabbar页面的路由配置,写入meta(路由元信息) , meta:{title:Tabbar名, showTabbar:true} ,通过v-if来控制底部栏显示与隐藏。
  • AngularJS使用路由切换视图

    千次阅读 2016-06-19 11:31:33
    AngularJS使用路由切换视图,下面是一个简单的学生信息管理实例。 注意:除了引用angular.js之外,还要引用angular-route.js。 1、创建index.html主视图 在index.html主视图中,我们将会把多个视图共有的东西都...
  • vue 导航栏路由切换样式随着切换

    千次阅读 2020-01-30 16:06:05
    如果当前的路由相等,那就显示这个 active <p :class="{active:'/home' == $route.path}" @click="goIndex()">首页</p> methods: { goIndex() { this.$router.push("/home"); } } ...
  • vue实现路由切换改变title

    千次阅读 2018-07-12 21:37:55
    因此在入口文件index.html只有一个title,单页所展示的若干页面只是随着路由的切换而在同一个index.html上不同的渲染而已,因此此时的title属性是不会随着页面的切换而变更的那么想实现路由切换title变换可以通过vue...
  • Vue Router可以实现路由切换,也就是组件之间的切换,它不同于传统页面的切换,所以在使用的时候经常会出现路由已经切换,但是组件没有更新的问题(只要实现对页面的刷新,组件就会重新进行加载): 一、 问题呈现 &...
  • 我们需要实现的效果,父路由默认选中第一个子路由切换路由让父路由高亮不会消失. 在实际开发中,可能遇到了当前路由下(父路由)在点击它的子路由时,他的(父路由)选中状态消失了 原因: 1、子路由router-...
  • 文章目录动态路由和tab页切换路由一、在当前页面监听路由的改变1、beforeRouterEnter 进入前拦截路由2、beforeRouterUpdate 路由更新时拦截3、...动态路由切换1、tab页2、准备状态管理(tabRouterPath.js)3、在Layo
  • 在用到elemenuUI中的nav...而在做点击菜单切换路由跳转正常,菜单选中状态也正常。 这时需要在菜单所对应的.vue文件中添加计算属性,监听路由的变化: computed:{ //onRoutes为菜单元素中的属性,:defalut-ac...
  • VUE—底部导航路由切换时更换图片 第一步: 布局 给每个底部导航路由都绑定一个点击事件,不要绑定在router-link上,那样会不生效,并且动态的添加图片路径 v-for也行,那样需要动态的绑定方法,可参考 v-for时动态...
  • 2.在菜单页面加入 inject : [ 'reload' ] , // 注入重载的功能(注入依赖) watch : { //检测路由参数发生改变时,刷新当前页面 调用 '$route' : function ( ) { // this.reload(); } } ,...
  • vue路由切换动画实现

    2020-07-15 10:14:06
    解决:路由切换时设置绝对定位position: absolute;,不建议在组件样式中添加,可以在过渡中添加xxx-enter-active,xxxx-leave-active,一旦过渡效果完成,过渡class就会移除不影响组件的样式布局 .twofade-enter-active...
  • vue 路由切换选中样式

    2020-06-28 15:09:02
    获取当前路径 <div class="navBox"> <p v-for="(item,index) in globalEngineerNav" :key="index" :class="{'isSelected': activeIndex === item.url}" @click="handleLink(index)">...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 13,443
精华内容 5,377
关键字:

菜单进行路由切换