vue路由嵌套

1. vue路由嵌适用套场景

最近自娱自乐用vue做小东西，觉得路由js里代码太乱了，就想着用一下路由嵌套来着。我当时小项目场景类似如下场景(当时场景类似JQ开发时主页面跳转子页面)，

但实际路由嵌套是类似jq开发时点击按钮显示隐藏效果，还是我做的太少，太天真了，想着主页面跳转子页面也用路由跳转来着...

场景总结，只有页面一部分变，一部分不变才合适用路由嵌套。

 2.路由嵌套使用(路由嵌套使用两个注意点：子路由的path，主组件结构必须加上标签)

(1).路由path省略写法（例如下代码第一条子路由），也可全写(例如下代码第二条子路由)

{
      path: '/components',
      meta: {
        footShow: true
      },
      component: resolve => require(['../pages/components/components.vue'], resolve),
      redirect:'/components/view',//可让父级路由重定向展示想要默认显示的子组件
      children: [{
          path: 'tips',
          component: resolve => require(['../pages/components/components-pages/tips/tips.vue'], resolve),
        },
        {
          path: '/components/view',
          component: resolve => require(['../pages/components/components-pages/view/view.vue'], resolve),
        },
        {
          path: 'tree',
          component: resolve => require(['../pages/components/components-pages/tree/tree.vue'], resolve),
        },
        {
          path: 'video',
          component: resolve => require(['../pages/components/components-pages/video/video.vue'], resolve),
        },
        {
          path: 'viewImage',
          component: resolve => require(['../pages/components/components-pages/viewImage/viewImage.vue'], resolve),
        },
      ]
    }

 (2).必须在主组件合适的地方加标签，不然子组件不会显示。

    

		
		抽屉
		

			
            
			
			
			
			
			
		
	

(3).路由嵌套中若需要默认显示 某一子路由时，可以让父级路由重定向(redirect:'/components/view');