场景:商品列表页面进入详情页
Goods.vue 列表页
<!--tag="li" 表示原始标签li被router-link取代 :to="" 路由地址 -->
<router-link
tag="li"
v-for="item of goodsList"
:key="item.id"
:to="'/goods/detail/'+item.id"
>.....
</router-link>
index.js 路由 router/index.js 冒号后面为参数
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/pages/home/Home'
import GoodsDetail from '@/pages/goods/Detail'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/goods/detail/:id',
name: 'GoodsDetail',
component: GoodsDetail
}
]
})