vue中的vue-router?query方式和params方式詳解
我們在vue中項目中, 使用 vue-router 是比較常見的
vue 的路由跳轉(zhuǎn)有兩種方式
- 一種是使用組件 router-link
- 另一種就是編程式路由導(dǎo)航
我們可以把vue 的組件分為兩種, 一種是一般組件, 一種就是路由組件
一般組件
使用的時候, 我們都是手寫 它的標(biāo)簽來使用的 比如我們會引入component 使用時會寫明<VueComponetXXXX></VueComponentXXX>
路由組件
我們一般會在 router.js中定義路由組件, 為它配置path name component children 等屬性, 而且跳由組件, 我們一般不會在代碼中寫<VueComponetXXXX></VueComponentXXX> 這樣的
當(dāng)我們的組件一旦被定義成一個路由組件的時候, 那么該組件實例上, 就會被自動加入兩個屬性
$route
每個組件中自身獨有的, 里面是路由的配置信息等$router
所有的路由組件都共有的一個對象, 路由的跳轉(zhuǎn),都是由它來負(fù)責(zé)的
路由跳轉(zhuǎn)方式一 (router-link) 以及 傳遞參數(shù)
參數(shù)的傳遞方式也有兩種 一種是 query 方式, 一種是params 方式
先說 query方式的,也就是使用 ?號 傳參
看一下 query 方式對應(yīng)的 router.js 中的路由定義(其實, query 方式的傳參, 對路由組件的定義來說基本沒有什么影響, 個人比較偏好)
router.js 中的定義如下
{ path:"/home", name:"Home", component:()=>import('../view/home.vue') }
上面的路由定義, 和平常的不傳參數(shù)時定義的是一樣的
//1.字符串跳轉(zhuǎn) <router-link to="/home">跳轉(zhuǎn)到home</router-link> //2.字符串帶參數(shù)跳轉(zhuǎn)(這種寫法不多見, 因為參數(shù)是寫死的) <router-link to="/home?id=1&title=標(biāo)題">字符串帶參數(shù)跳轉(zhuǎn)</router-link> //3.字符串帶參數(shù)跳轉(zhuǎn)(動態(tài)參數(shù)) <router-link :to="`/home?id=${id}&title=${title}`">字符串帶動態(tài)參數(shù)跳轉(zhuǎn)</router-link> -------------------------上面的寫法是字符串方式的------------------------------ -------------------------下面的寫法使用對象的方式------------------------------ <router-link :to="{ path:'/home', query:{ id:id, title:title } }">對象方式動態(tài)參數(shù)的跳轉(zhuǎn)</router-link> -----------------------對象式的寫法 vue會自動轉(zhuǎn)換成 ? 的方式----------------------
當(dāng)跳轉(zhuǎn)到home組件的時候, 我們就可以在 home 組件的 $route.query.id 和 $route.query.title 接收到傳過來的參數(shù)了
params方式傳遞參數(shù)
首先 params方式傳遞參數(shù)的話, 那么 路由的定義組件寫法是有些變化的
{ path:"/home/:id/:title", //在path 中要指定參數(shù)的占位符 name:"Home", //在使用對象寫法的時候, 這個name是必不可少的 component:()=>import('../view/Home.vue') }
上面的 name 項是必須配置的, path項中要預(yù)先定義好 參數(shù)的占位符
router-link中的寫法如下
//1.字符中帶參數(shù)跳轉(zhuǎn)(params路由方式) <router-link to="/home/10/標(biāo)題">字符中帶參數(shù)跳轉(zhuǎn)(params路由方式)</router-link> //2.字符中帶參數(shù)跳轉(zhuǎn)(params路由方式)動態(tài)參數(shù) <router-link :to="`/home/${id}/${標(biāo)題}`">字符中帶參數(shù)跳轉(zhuǎn)(params路由方式)動態(tài)參數(shù)</router-link> //3.對象方式的 params 跳轉(zhuǎn) //注意 對象方式的params 路轉(zhuǎn), 只能使用命名路由, 如果使用 path 屬性, 是沒有效果的 <router-link :to="{ name:'Home', //這里使用的是路由的名稱, 使用path 無效 params:{ id:id, title:titel } }">對象方式的路由跳轉(zhuǎn)(params跳由方式)</router-link>
上面要注意的就是 params 方式的路由跳轉(zhuǎn)對象式寫法, 只能使用 name , 也就是說只能使用命名路由
在使用 params 傳參之后, 在對應(yīng)的路由組件中 就可以使用 $route.param.id 和 $route.param.title 接收到參數(shù)了
上面是使用了 router-link 來指定跳轉(zhuǎn)的, 它有個不好的方面, 就是會破壞我們的 頁面結(jié)構(gòu), 當(dāng)結(jié)構(gòu)被更改時, 頁面上的css 很有可能被破壞了, 所有, 我們有的時候使用的是編程式路由導(dǎo)航, 它不會破壞結(jié)構(gòu), 還比較靈活
編程式路由導(dǎo)航
我們在跳轉(zhuǎn)后的頁面接收參數(shù), 可以使用 $route.query.XXX 或者 $route.params.XXX 接收參數(shù), 這個寫沒有問題, 但有點麻煩, vue-router 在 路由的定義組件中添加了一個 props 的配置項, 可以幫助我們簡化寫法
我們給組件中的路由定義位置加一個 props 配置項
{ path: '/home', name: 'Home', component: Home, props:{a:"111",b:"222"} },
上面的代碼中, 添加的 props 的配置, 返回了一個對象 , 這種做法基本不用, 因為, 返回的數(shù)據(jù)是個死的
下面說一下, props的三種賦值的方式
- 第一種:就是上面的 返回一個 對象 (基本不用)
- 第二種:props 的值可以配置成一個 true 布爾值, (這種方式的使用前提是, 路由定義的時候也是 params 方式的) 也就是說 上面的 path:‘/home/:id/:title’
- 第三種:就是 props可以是一個函數(shù), 程序員自已來處理函數(shù)的返回值
看一下第一種使用props的代碼
路由定義是這樣的
在home組件中使用 props 來接收參數(shù)
上面的寫法基本是用不著, 我們只是為了展示它的用法, 因為它的數(shù)據(jù)是個死的, 我們基本不會這么用
第二種方式
props 配置為 true , 這種方式的 路由 應(yīng)該是 path:‘/home/:id/:title’ 這樣子的才可以使用
這種方式 要注意的就是 路由中定義的 path:“/home/:id/:title”
第三種 props 是一個函數(shù),props 是一個函數(shù), 這種方法就比較靈活了, 并且, 你不用考慮路由 是 params方式, 還是 query方式的, 因為, 函數(shù)中的返回值是程序員自已掌握的
第三種方式
就是在路由定義中處理了傳值的參數(shù), 在組件接收到之后就可以直接使用,
而以前$route.query.id 的方式是, 是在 路由組件中 處理的參數(shù), 也就是說 同一件事件, 在不同的地方處理了, 導(dǎo)至使用的形式不一樣
個人認(rèn)為, 這些方式, 也沒有顯示出太方便。以上為個人經(jīng)驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue鼠標(biāo)懸停事件監(jiān)聽實現(xiàn)方法
頁面在鼠標(biāo)懸停(不動)n秒之后,頁面進行相應(yīng)的事件,下面這篇文章主要給大家介紹了關(guān)于vue鼠標(biāo)懸停事件監(jiān)聽的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09Vue中兩種生成二維碼(帶logo)并下載方式總結(jié)
與后端生成二維碼相比,前端生成二維碼更具有靈活性,下面這篇文章主要給大家介紹了關(guān)于Vue中兩種生成二維碼(帶logo)并下載的相關(guān)資料,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03vue3中?provide?和?inject?用法小結(jié)
父子組件傳遞數(shù)據(jù)時,使用的是props和emit,父傳子時,使用的是?props,如果是父組件傳孫組件時,就需要先傳給子組件,子組件再傳給孫組件,如果多個子組件或多個孫組件使用時,就需要傳很多次,會很麻煩,這篇文章主要介紹了vue3中?provide?和?inject?用法,需要的朋友可以參考下2023-11-11