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里面进行加载。