Vue 动态路由详解及实例

修改src/route/index.js文件中的path：

import Vue from 'vue'
import Router from 'vue-router'
import GoodsList from '@/views/GoodsList'

Vue.use(Router)

export default new Router({
  mode: 'history',    //加上这一行访问地址中'傻逼'的  #/ 就可以去掉了
  routes: [
    {
      // 传一个动态参数goodsId 写法（http://localhost:8080/goods/12）
      // path: '/goods/:goodsId', 
      
      // 传两个动态参数 goodsId，name写法 (http://localhost:8080/goods/12/user/admin)                           
      path: '/goods/:goodsId/user/:name', 
                                 
      name: 'GoodsList',
      component: GoodsList
    }
  ]
})

2、在组件中利用 $route.params.goodsId 来获取goodsId,拿到这个Id我们就能做很多事情了
<template>
  <div>
    这是商品列表页面
    <span>{{ $route.params.goodsId }}</span></br>
    <span>{{ $route.params.name }}</span>
  </div>
</template>

<script>
export default {
  data(){
    return{
      msg: ''
    }
  }
}
</script>

<style>
</style>