vue路由傳參方式的方式總結及獲取引數詳解

2022-07-29 22:01:48

一、宣告式傳參

1.params傳參(顯示引數)

在url中會顯示出傳參的值，重新整理頁面不會失去拿到的引數，使用該方式傳值的時候，需要子路由提前設定好引數：

//路由引數設定
const router = new VueRouter({
  routes: [{
    path: '/about/:id',
    component: User
  }]
})
 
//宣告式導航使用
<router-link to="/about/12">跳轉</router-link>

//路由引數設定
const router = new VueRouter({
  routes: [{
    name: 'user1',
    path: '/about/:id',
    component: User
  }]
})
 
//宣告式導航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳轉</router-link>

2.params傳參(不顯示引數)

在url中不會顯示出傳參的值，但重新整理頁面會失去拿到的引數，使用該方式傳值的時候，需要子路由提前設定好name引數:

//路由引數設定
const router = new VueRouter({
  routes: [{
    name: 'user1',
    path: '/about',
    component: User
  }]
})
 
//宣告式導航使用
<router-link :to="{ name: 'user1', params: { id: 123 } }">跳轉</router-link>

3.query 傳參

query 傳過去的引數會拼接在位址列中（?name=xx），重新整理頁面資料不會丟失，使用path和name都可以：

//路由引數設定
const router = new VueRouter({
  routes: [{
    name: 'user1',
    path: '/about',
    component: User
  }]
})
 
//使用name
<router-link :to="{ name: 'user1', query: { id: 123 }}"></router-link>
//使用path
<router-link :to="{ path: '/about', query: { id: 123 } }"></router-link>

二、程式設計式傳參

1.params傳參(顯示引數)

//路由設定
{
  path: '/child/:id',
  component: Child
}
//程式設計式使用
this.$router.push({
    path:'/child/${id}',
})

//路由設定
{
  path: '/child:id',
  component: Child,
  name:Child
}
//程式設計式使用
this.$router.push({
    name:'Child',
    params:{
    id:123
    }
})

2.params傳參(不顯示引數)

//路由設定
{
  path: '/child',
  component: Child,
  name:Child
}
//程式設計式使用
this.$router.push({
    name:'Child',
    params:{
    id:123
    }
})

3.query 傳參

//路由設定
{
  path: '/child',
  component: Child,
  name:Child
}
//程式設計式使用
//name方式
this.$router.push({
    name:'Child',
    query:{
    id:1
}
})
//path方式
this.$router.push({
    path:'/child',
    query:{
    id:1
}
})

三、獲取引數

1、params的獲取方式

this.$route.params.xxx

2、query的獲取方式

this.$route.query.xxx

四、需要注意的點

1、如果使用params傳參,且引數是以物件的形式，跳轉路徑只能使用name形式而不能用path.

2、如果想要params引數想傳參也可以不傳參需要在預留位置後面加?。

//路由引數設定
const router = new VueRouter({
  routes: [{
    path: '/search/:keyword?',
    name: 'search',
    component: () => import('@/pages/Search'),
    meta: { show: true }
  }]
})
//程式設計式傳參
 this.$router.push({
    name: "search",
    params: {},
    query: { keyword: this.keyword },
 });

3、解決params傳值為空字串路徑會出現問題：

 this.$router.push({
      name: "search",
      params: { keyword: "" || undefined },
      query: { keyword: this.keyword },
 });

總結

到此這篇關於vue路由傳參方式的方式總結及獲取引數的文章就介紹到這了,更多相關vue路由傳參及獲取引數內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！

vue路由傳參方式的方式總結及獲取引數詳解

目錄

一、宣告式傳參

1.params傳參(顯示引數)

2.params傳參(不顯示引數)

3.query 傳參

二、程式設計式傳參

1.params傳參(顯示引數)

2.params傳參(不顯示引數)

3.query 傳參

三、獲取引數

1、params的獲取方式

2、query的獲取方式

四、需要注意的點

總結

熱門文章