vue路由嵌套

1. vue路由嵌适用套场景

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

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

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

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

(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).必须在主组件合适的地方加<router-view></router-view>标签，不然子组件不会显示。

    <div class="ui-pane">
		<navbar v-if="$route.meta.footShow"></navbar>
		<ui-header headertit="组件"><span>抽屉</span></ui-header>
		<div class="ui-content">
			<arealine linetit="原生组件"></arealine>
            <router-view></router-view>
			<pageine linetit="tips" to="/components/tips"></pageine>
			<pageine linetit="view" to="/components/view"></pageine>
			<pageine linetit="viewImage" to="/components/viewImage"></pageine>
			<pageine linetit="tree" to="/components/tree"></pageine>
			<pageine linetit="video" to="/components/video"></pageine>
		</div>
	</div>

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