import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
// path: '/goodslist/:goodsID', //第一步
// path: '/goodslist/:goodsID.html', //第二步
path: '/goodslist-:goodsID.html', //最终效果
//还可以使用正则验证参数的合法性
// path: '/goodslist/:goodsID(\\d+)',
name: 'goodslist',
component: GoodsList
}
]
})
访问地址如下才可匹配：http://localhost:9000/goodslist-666999666.html
<router-link :to="{name:xxx, params: {key:value}}">valueString</router-link>
<h2>{{$route.params.username}}</h2>
// 路由配置
{
path: '/detail/:id',
name: 'Detail',
component: Detail
}
// js跳转
this.$router.push({
name: 'Detail',
params: {id: 8}
})
// 地址显示为
http://localhost:8080/detail/8
// 获取参数
<div>
<h1>This is an detail page</h1>
{{$route.params.id}} // 这是8
</div>
// 路由配置
{
path: '/detail-:id.html',
name: 'Detail',
component: Detail
}
// js跳转
this.$router.push({
name: 'Detail',
params: {id: 8}
})
// 地址显示为
http://localhost:8080/detail-8.html
// 获取参数
<div>
<h1>This is an detail page</h1>
{{$route.params.id}} // 这是8
</div>
