1. 程式人生 > >vue路由傳遞引數

vue路由傳遞引數

1.通過path來確定匹配的路由,通過query來傳遞引數

傳參:

 goList(title, id) {
        this.$router.push({path: '/list', query: {title: title, id: id}});  //注意這裡是 $router
      }

接參:

 this.params.brandId = this.$route.query.id;//這裡是 $route

2.通過路由屬性name確定匹配路由,通過params傳遞引數

傳參:

 goList(title, id) {
        // this.$router.push({path: '/list/'+id+"/"+title});//也行
        this.$router.push({name: 'list',params:{"title":title,"id":id}});
      } //傳遞的引數如果不在路由上進行配置,不會再URL明文顯示,但是頁面重新整理後引數丟失
        //配置如下

router的index.js

 {
      path: '/list/:id/:title',
      name:"list",          //這裡需要配置name屬性
      component: List,
      meta:{
        title:'列表'
      }
    },

接參:

  this.params.brandId = this.$route.params.id;//這裡是 $route,接受欄位由query換成params