vue 中query和pramas中的那點事

//$router : 是路由操作對象，只寫對象

//$route : 路由信息對象，只讀對象

//操作 路由跳轉

this.$router.push({
name:'hello',
params:{
   name:'word',
   age:'11'
}
})

 

//讀取 路由參數接收

this.name = this.$route.params.name;
this.age = this.$route.params.age;

 

query傳參要用path來引入（name引入也可以），params傳參要用name來引入

//query傳參，使用name跳轉

this.$router.push({
name:'second',
query: {
    queryId:'20180822',
    queryName: 'query'
}
})

//query傳參，使用path跳轉
this.$router.push({
path:'second',
query: {
    queryId:'20180822',
    queryName: 'query'
}
})

//query傳參接收
this.queryName = this.$route.query.queryName;
this.queryId = this.$route.query.queryId;

 

2·params傳遞參數

注：使用params傳參只能使用name進行引入

//params傳參 使用name
this.$router.push({
  name:'second',
  params: {
    id:'20180822',
     name: 'query'
  }
})

//params接收參數
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;

//路由

{
path: '/second/:id/:name',
name: 'second',
component: () => import('@/view/second')
}

需要注意的是：

params是路由的一部分,必須要在路由后面添加參數名。query是拼接在url后面的參數，沒有也沒關系。
params一旦設置在路由，params就是路由的一部分，如果這個路由有params傳參，但是在跳轉的時候沒有傳這個參數，會導致跳轉失敗或者頁面會沒有內容。
如果路由后面沒有 /:id/:name    地址欄沒有參數 但是如果你刷新一下，就會發現頁面獲取參數失敗  

因此我們不可能讓用戶不要刷新，所以我們必須在路由后面加上 /:id/:name

 

//params傳參 使用path
this.$router.push({
path:'second',
params: {
id:'20180822',
name: 'query'
}
})

//params接收參數
this.id = this.$route.params.id ;
this.name = this.$route.params.name ;

總結

傳參可以使用params和query兩種方式。

使用params傳參只能用name來引入路由，即push里面只能是name:’xxxx’,不能是path:’/xxx’,因為params只能用name來引入路由，如果這里寫成了path，接收參數頁面會是undefined！！！。

使用query傳參使用path來引入路由。

params是路由的一部分,必須要在路由后面添加參數名。query是拼接在url后面的參數，沒有也沒關系。

二者還有點區別，直白的來說query相當於get請求，頁面跳轉的時候，可以在地址欄看到請求參數，而params相當於post請求，參數不會再地址欄中顯示。

 

解決問題： vue  通過 name 和 params 進行調整頁面傳參刷新參數丟失問題

export default new Router({
  routes: [

    {
      path: '/',
      redirect: '/main',
    },{
      path: '/main',
      name: 'Main',
      component: ()=> import('@/views/Main'),
      children: [
        {
          //path: '/testPage',  //這種方式 不配置參數名， 頁面刷新會丟失參數
           path: '/testPage/:aaa/:bbb',  //這樣通過 name 和 params 進行路由傳參時 ， 刷新頁面就不會丟失 參數aaa 和 bbb 了。
          name: 'TestPage',
          component: ()=> import('@/views/TestPage/TestPage')
        },
      ]

    },

  ]
})

methods: {

            //路由調整傳參測試

            goRouterTest(){
                // this.$router.push('/testpage');
                this.$router.push({ name: 'TestPage', params:{aaa: '111', bbb: '222'} });
            }

        },

如果用params傳值為對象情況下  刷新頁面就消失

解決辦法   用 JSON.stringify() 方法用於將 JavaScript 值轉換為 JSON 字符串。然后再用組件內部JSON,parse()再次轉為對象。 或者選中vuex方式傳值  在組件內容用計算屬性獲取。

 

 

路由組件傳參

在組件中使用 $route 會使之與其對應路由形成高度耦合，從而使組件只能在某些特定的 URL 上使用，限制了其靈活性。

使用 props 將組件和路由解耦：取代與 $route 的耦合

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // 對於包含命名視圖的路由，你必須分別為每個命名視圖添加 `props` 選項：
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})

通過 props 解耦 如果 props 被設置為 true，route.params 將會被設置為組件屬性。