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:
如果指定mode:'history'
路由访问:http:
5. 子路由添加格式:children[{。。。}]