Vue动态路由

场景:商品列表页面进入详情页

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
    }
  ]
})
Last modification:April 8th, 2019 at 03:47 pm
如果觉得我的文章对你有用,请随意赞赏

Leave a Comment