vue動(dòng)態(tài)路由指的是什么該如何配置

今天小編給大家分享一下vue動(dòng)態(tài)路由指的是什么該如何配置的相關(guān)知識點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

在vue中，動(dòng)態(tài)路由就是將匹配某種模式下的路由映射到同個(gè)組件中，動(dòng)態(tài)路由的本質(zhì)就是通過url進(jìn)行傳參；可以通過“params”和“query”兩種方式來傳遞動(dòng)態(tài)參數(shù)。

本文操作環(huán)境：windows10系統(tǒng)、Vue2.9.6版，DELL G3電腦。

vue動(dòng)態(tài)路由是什么意思

動(dòng)態(tài)路由的理解

動(dòng)態(tài)路由就是把匹配某種模式下的路由映射到同個(gè)組件中，其實(shí)本質(zhì)就是通過url進(jìn)行傳參

比如說：有一個(gè)商品Goods的組件，我們需要讓不同的商品id都映射到這個(gè)組件中，此時(shí)就需要用到動(dòng)態(tài)路由了。

動(dòng)態(tài)路由的配置

可以通過兩種方式來傳遞動(dòng)態(tài)參數(shù)：
（1）、params
（2）、query

注意：以下代碼的演示都是在history的路由模式下

params方式的傳參

配置路由的方式：使用冒號：綁定動(dòng)態(tài)參數(shù)。

//index.js中配置路由信息
const routes = [{
    path: '/goods/:id',
    component: Goods}]

路由跳轉(zhuǎn)時(shí)，分為：

（1）使用router-link方式實(shí)現(xiàn)路由跳轉(zhuǎn)
此種方式下，一可以使用字符串，在路徑后面直接跟上對應(yīng)的值，如：

二可以使用對象的方式，如：

注意：

• params方法中，to屬性使用對象的方式，必須由name屬性引入路由，不能用path。

• params方法傳參時(shí)，屬性名必須跟配置路由時(shí)的動(dòng)態(tài)參數(shù)名一致，否則報(bào)錯(cuò)。
  （2）、使用$router的方式進(jìn)行路由的跳轉(zhuǎn)

//方法1
 this.$router.push('/goods/' + this.goodsId)
 //方法2
 this.$router.push({
   name: 'goods',
   params: {
     id: this.goodsId   }})

params方式的傳參，對應(yīng)傳參后的url地址如下所示：

獲取參數(shù)的方式：
$router.params，如本例中想要獲取id的值，對應(yīng)代碼為：

$route.params.id

query方式的傳參

配置路由時(shí)，普通配置即可，即原來怎么配置路由，現(xiàn)在就還怎么配置。如：

const routes = [{
    path: '/goods',
    name: 'goods',
    component: Goods}]

路由跳轉(zhuǎn)時(shí)，分為：
（1）使用router-link方式實(shí)現(xiàn)路由跳轉(zhuǎn)
query傳參的方式只可以通過對象，不可以使用字符串

<router-link :to="{path: '/goods', query: {id: goodsId}}">商品</router-link>

（2）、使用$router的方式進(jìn)行路由的跳轉(zhuǎn)

this.$router.push({
       path: '/goods',
       query: {
         id: this.goodsId       }
     })

this.$router.push({
       path: '/goods',
       query: {
         id: this.goodsId       }
     })

query方式的傳參，對應(yīng)傳參后的url地址顯示為：
 

注意：query方式的傳參，query對象里面的屬性名（如本例中的id）可以隨便起名，不像params方式傳參時(shí)受限。
同時(shí)，此種方式下路由的引入既可以使用path屬性，也可以使用name屬性。
獲取參數(shù)的方式：
$route.query，如本例中想要獲取id 值，代碼為：

$route.query.id

總之，千萬要注意：
（1）、params方式路由的引入只能用name，query方式路由的引入可以用name和path。
（2）、路由跳轉(zhuǎn)使用 “router”；獲取參數(shù)使用“route”

以上就是“vue動(dòng)態(tài)路由指的是什么該如何配置”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注億速云行業(yè)資訊頻道。