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'
imp
4000
ort 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里面进行加载。