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  (立刻)
          }
      }
复制代码

 

posted @   高家三少爷  阅读(298)  评论(1编辑  收藏  举报
努力加载评论中...
点击右上角即可分享
微信分享提示