使用 router-view 和 router-link 实现嵌套路由

嵌套路由实现左边选择右边刷新：

左边菜单栏使用：router-link 标签，右边使用 router-view 嵌套，实现路由；

router-link 传参方式：

其中name 需要和 router.js 中路由对应，传入不同的 type 以区分不同的tab页面；

实现步骤：

1.app 的主路由中 这个步骤一成不变;

2.在想要实现同页面的嵌套路由的page中；再一次定义一个 router-view 标签，如下：

①：需要跳转的 router-link :

      
         选项一			    
         
      
      
         选项二
         
             

复制代码

②：嵌套的 router-view：

    

复制代码

③：router.js 中的配置：

    routes: [
        {
          path: '/',
          name: 'mainPage',
          component: MainPage
        },
        {
          path: '/page',
          name: 'mainPage',
          component: MainPage,
          children: [
            {
              path: '/page/:type',
              name: 'firstPage',
              component: FirstPage
            }
          ]
        }
      ]
复制代码

其中需要一个根路由，再在根路由的路径下写子路由路径！注意 path 下面的路径配置；其中，type 的值使我们在 router-link 中传递过来的；在子组件的 firstPage 中我们可以使用 watch 来监听url 上面的 params 变化；具体如下：

④：在 firstPage 中的 watch 函数监听 route 变化

watch: {
    '$route' (to, form) {
      if (this.$route.params.type === '1') {
        this.Msg = '这是第一页'
      } else if (this.$route.params.type === '2') {
        this.Msg = '开心,这是第二页'
      } 
    }
 }
复制代码

在这个地方执行该页面相应的操作即可；

注意事项：

1.keep-alive 标签的用法：

 
     
 
复制代码

配合 router-view 缓存整个路由页面

2.路由中可以使用 children 当作路由的嵌套；

{
      path: '/app',
      name:'app',
      redirect:'/app/main',
      component: resolve => import('./app'),
      children:[ 
        {
          path: '/app/main',
          name:'main',
          component: resolve => import('./view/mainPage'),
 ｝
      ]
}
复制代码

3.路由中component中 resolve 的用法：

onent: resolve => import('./view/mainPage')
复制代码

实现路由的懒加载；