vue动态路由

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

const Goods = {
      template: `
        
{{this.$route.params}}商品
      `,
      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
    })

第三不配置模板

    图书商品
    汽车商品
    美食商品

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