嵌套路由

嵌套路由使用场景：
左侧为菜单，右侧为内容，当点击菜单时，切换内容组件而整个页面却不刷新.

嵌套路由的知识点大致和动态路由一样，不同点如下：

eg: good组件中嵌套title组件和content组件
router/index.js中的配置。

import goods from './../views/goods.vue';
import title from './../components/title.vue';
import content from './../components/content.vue';
Vue.use(Router)
export default new Router({
  routes: [
    {
      path: '/user/:id',
      name: 'goods',
      component: goods,
      children:[         //通过children属性添加嵌套路由
        {
          path: 'title',
          name: 'shuiyi',     //name随意写
          component: title,
        },
        {
          path: 'content',
          name: 'chaosuiyi',
          component: content,
        }
      ]
    },
  ]
})

goods.vue中的配置：

template>
 <div>
      <h1>我是商品详情页</h1>
     <router-link :to="{name:'shuiyi'}">调到标题页</router-link>   //路由切换的一种方式，name要相对应。
     
      <router-view></router-view>   //挂载嵌套路由
      
      <router-link to="/user/123/title">调到标题组件</router-link> // 路由跳转的另一种方式，注意这里路径一定要加上goods组件相对应的路径，不然就不是嵌套路由了。
          
          <router-link to="/user/123/content">调到内容组件</router-link>
 </div>
</template>
<script>
export default {

}
</script>