vue路由傳參方式的方式及獲取參數的方法

這篇“vue路由傳參方式的方式及獲取參數的方法”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“vue路由傳參方式的方式及獲取參數的方法”文章吧。

一、聲明式傳參

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路由傳參方式的方式及獲取參數的方法”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。