vue动态路由

我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。能够提供参数的路由即为动态路由
第一步：定义组件

const Goods = {
      template: `
        <div>{{this.$route.params}}商品</div>
      `,
      created(){
        console.log(this.$route.params);
      },
      watch:{
        $route(){
          console.log(this.$route.params);
        }
      }
    }

 第二部配置路由

const routes = [
      {
        path: '/goods/:type', 
        component: Goods
      }

    ]

    const router = new VueRouter({
      routes
    })

    const app = new Vue({
      el: '#app',
      router
    })

第三不配置模板

<router-view></router-view>
    <router-link to="/goods/book">图书商品</router-link>
    <router-link to="/goods/car">汽车商品</router-link>
    <router-link to="/goods/food">美食商品</router-link>

//监听路由
const Goods = {
      template: `
        <div>{{this.$route.params}}商品</div>
      `,
      watch:{
        '$route': {
            handler: function(){
              console.log(this.$route.params);
            },
            immediate: true  （立刻）
          }
      }