• index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import GoodsList from '../views/GoodsList'
import Title from '@/views/Title'
import Image from '@/views/Image'


Vue.use(Router)

export default new Router({
  mode:'hash',
  routes: [
    {
      // path: '/goods/:goodsId/user/:name',
      mode:'hash/history',
      path: '/goods',
      name: 'GoodsList',
      component: GoodsList,
      children:[
        {
          path: 'title',
          name: 'title',
          component: Title
        },
        {
          path: 'image',
          name: 'image',
          component: Image
        },
      ]
    }

  ]

<template>
<div>
这是商品列表页面
<span>{{$route.params.goodsId}}</span>，
<span>{{$route.params.name}}</span>
<router-link to="/goods/title">显示商品标题</router-link>
<router-link to="/goods/image">显示商品图片</router-link>
<div >
  <router-view></router-view>
</div>

</div>
</template>
<style>   </style>
<script >
    export default{
      data(){
        return{
          msg:'hello vue'
        }
      }
    }
</script>

```
1. @  代表项目src目录下路径,

2. import  导入对应模块文件
3. 动态路由匹配格式  path: '/goods/:goodsId/user/:name'

4  如果指定mode:'hash',

路由访问：http://localhost:8080/#/goods/23/user/zhangsan

如果指定mode:'history' 

路由访问：http://localhost:8080/goods/23/user/zhangsan

5.子路由添加格式：children[{。。。}]