vue-router -- 嵌套路由

一、概述

• 路由嵌套路由
• 使用场景：
  
  • name找用户，用户找对应的信息
    二、代码演示
• 目录结构

• goods.vue

<template>
    <div>
        商品列表
        <router-link to="/goods/title">标题</router-link>
        <router-link to="/goods/img">图片</router-link>
        <div>
            <router-view>

            </router-view>
        </div>
    </div>
</template>

• img.vue

<template>
    <div id="">
        这里是图片
    </div>
</template>

• title.vue

<template>
    <div id="">
        这里是标题
    </div>
</template>

• index.js

import Vue from 'vue'
import Router from 'vue-router'
import Goodlists from '@/Goodlists/goods'
import Title from '@/Goodlists/title'
import Img from '@/Goodlists/img'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/goods', 
      name: 'Goodlists',
      component: Goodlists,
      children:[
      {
        path:'title',
        name:'title',
        component:Title
      },
      {
        path:'img',
        name:'img',
        component:Img
      }
      ]
    }
  ]
})

在以上例子中，、goods是主路由，在app.vue中的router-view里进行渲染，它里面的子路由（img / title）则是在自己里面的router-view里面进行加载。