vue 路由嵌套 路由跳转

业务场景：左侧列表主导航   右侧顶部tab切换导航

主导航（Layout.vue）：

<aside class="aside-wrapper"  :class="[isActive ? 'navShrink' : 'navOpen']">
  <navBar></navBar>//左侧导航菜单组件
</aside>
<div class="main-container">
  <router-view :key="key"></router-view>
</div>

export default{
  name: 'Layout',
  computed: {
    key () {//绑定key值，阻止组件复用，达到路由刷新的目的
      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route +new Date()
    }
  }
}

右侧tab导航（TabNav.vue）：

<div class="tab-container">
  <level-bar></level-bar>//右侧导航菜单组件
  <router-view :key="key"></router-view>
</div>

绑定key值同上

路由写法（index.js）

import layout from '@/views/layout/layout'

{
  path: '/mine',
  component: layout,
  redirect:'/mine/account/list',
  children: [
  {
    path:'account',
    name:'accounts',
    component:_import('mine/TabNav'),
    redirect:'/mine/account/list',
    children:[
      {
        path:'list',
        name:'accountLists',
        component:_import('mine/account/index')
      },{
        path:'detail/:accountId',
        name:'accountDetails',
        component:_import('mine/account/AccountInformation')
      }
    ]
  },
  {
    path:'entity',
    name:'entitys',
    component:_import('mine/TabNav'),
    redirect:'/mine/entity/list',
    children:[
      {
        path:'list',
        name:'subjectLists',
        component:_import('mine/entity/SubjectManagement'),
      }
    ]
  }]
}

查看详情：路由传值唯一标识id在导航栏显示

路由$router写法：

this.$router.push({
  name:'accountDetails',
  params:{
    accountId:this.accountId//accountId 与路由path中对应
  }
})

获取传值id:

this.$route.params.accountId

导航地址不显示数据直接使用params传递参数，路由里面不写:id，路由里不指定:id，页面刷新时则会造成页面刷新时，param传递的参数丢失，我的使用场景传递的数据较多，显示在地址栏太不好看，因此使用localStorage存储一次数据