vue动态路由

1 动态路由 （监听路由变化的两种写法）

方法一：

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

方法二：

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

注意：使用immediate: true；这个属性，默认为false。其值代表是否以当前的初始值执行handler的函数。

2.获取路由参数的其他实现（$route.query）

<router-link to="/demo?id=2">去往id为2的链接</router-link>
<router-link :to="{path: '/demo', query:{id: 3}}">去往id为3的链接</router-link>
<router-link :to="{name: 'demo', query:{id: 4}}">去往id为3的链接</router-link>
<script>
  const routes = [
    {
      name:'demo',
      path: '/demo',
      component: Demo
    }
  ]

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

  const Demo = {
      template: `
        <div>{{$route.query}}</div>
      `,
      methods: {
        fn (to, from){
          // to表示新的路由信息对象 from表示旧的路由信息对象
          console.log(to.query)
        }
      },
      watch: {
        '$route': {
          handler: 'fn',
          immediate: true
        }
      }
    }
</script>