动态路由->路由传参->自定义链接地址->伪静态

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>