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

創(chuàng)新互聯(lián)專注于海城網(wǎng)站建設服務及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供海城營銷型網(wǎng)站建設，海城網(wǎng)站制作、海城網(wǎng)頁設計、海城網(wǎng)站官網(wǎng)定制、微信小程序服務，打造海城網(wǎng)絡公司原創(chuàng)品牌,更為您提供海城網(wǎng)站排名全網(wǎng)營銷落地服務。

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

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

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

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

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

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

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

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

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

params方式的傳參

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

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

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

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

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

注意：

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

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

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

params方式的傳參，對應傳參后的url地址如下所示：

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

$route.params.id

query方式的傳參

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

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

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

商品

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

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

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

query方式的傳參，對應傳參后的url地址顯示為：
 

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

$route.query.id

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

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