關(guān)于Vue的URL轉(zhuǎn)跳與參數(shù)傳遞方式
Vue URL轉(zhuǎn)跳與參數(shù)傳遞
寫業(yè)務(wù)中，從一個(gè)頁(yè)面跳轉(zhuǎn)到另一個(gè)頁(yè)面，經(jīng)常需要傳值和取值，如何實(shí)現(xiàn)？
1.通過(guò)router-link進(jìn)行跳轉(zhuǎn)
使用query傳遞參數(shù)，路由必須使用path引入
<-- 在a頁(yè)面進(jìn)行傳值 -->
? ??
<router-link :to="{path: '/home', query: {key: 'hello', value: 'world'}}">
<button>跳轉(zhuǎn)</button>
</router-link> 跳轉(zhuǎn)地址 => /home?key=hello&value=world
在b頁(yè)面取值： this.$route.query.key
使用params傳遞參數(shù)，路由必須使用name引入
<-- 在a頁(yè)面進(jìn)行傳值 -->
? ??
<router-link :to="{name: '/home', params: {key: 'hello', value: 'world'}}">
<button>跳轉(zhuǎn)</button>
</router-link> 跳轉(zhuǎn)地址 ==> /home
在b頁(yè)面取值：this.$route.params.key
2.$router方式跳轉(zhuǎn)
通過(guò)query
this.$router.push({
path: '/detail',
query: {
name: 'admin',
code: 10021
}
});跳轉(zhuǎn)地址 => /detail?name=admin&code=10021
取值：this.$route.query.name
3.跳轉(zhuǎn)外部鏈接
如果是vue頁(yè)面中的內(nèi)部跳轉(zhuǎn)，可以用this.$router.push()實(shí)現(xiàn)，但是如果用這種方法跳到外部鏈接，就會(huì)報(bào)錯(cuò)，原因是直接把外部鏈接加在了http://localhost:8080/#/的后面，這就導(dǎo)致跳轉(zhuǎn)出現(xiàn)問(wèn)題。
那么如何跳轉(zhuǎn)到外部鏈接呢，其實(shí)只需用 window.location.href = ‘url’就能實(shí)現(xiàn)。
具體代碼如下：html <span @click="See(url)">點(diǎn)擊轉(zhuǎn)跳</span>
上面是觸發(fā)一個(gè)點(diǎn)擊事件，其中url是傳給see的url鏈接，下面是事件執(zhí)行的函數(shù)
js See(e) { window.location.href = e }Vue參數(shù)傳遞的幾種方法
開發(fā)過(guò)程中參數(shù)傳遞
1.通過(guò)name傳遞參數(shù)
圖一
圖二
我們常把頁(yè)面的路由配置在圖一中的 router 文件夾下的 js 文件中，圖二為配置的內(nèi)容。這其中的 name 屬性是可以作為參數(shù)傳遞的，在模版中直接只用 {{$route.name}} 接收，即可以在模版中顯示。
2.通過(guò)<router-link>中的to傳遞參數(shù)
使用 < router-link to=" /page "> page < /router-link > 可以實(shí)現(xiàn)頁(yè)面的跳轉(zhuǎn)，這里面 to 是可以帶上參數(shù)跳轉(zhuǎn)的，我們需要在給 to 進(jìn)行綁定，即 : to (v-bind:to)
<router-link :to="{name:'page',params:{data:'我是App.vue傳至page.vue的參數(shù)'}}" >page</router-link>- 這其中需要注意的是要給 to 加上綁定，后面跟的是對(duì)象形式的字符串。
- 其中的 name 是我們?cè)诼酚膳渲梦募ㄉ蠄D圖二）中配置的 name 兩者要對(duì)應(yīng)。
- params 即是我們要傳的參數(shù)，它可以是多個(gè)值。
隨后在對(duì)應(yīng)的模版頁(yè)面中（這里為 page.vue）進(jìn)行接收。
{{$route.params.data}}3.在業(yè)務(wù)邏輯中實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)并傳參
當(dāng)在業(yè)務(wù)邏輯中需要實(shí)現(xiàn)頁(yè)面跳轉(zhuǎn)經(jīng)常能夠使用到編程式導(dǎo)航：
this.$router.go(1)，進(jìn)入下一級(jí)this.$router.back(-1)，返回上一級(jí)，通俗的說(shuō)就是前進(jìn)與后退。this.$router.push(’/page’)，跳轉(zhuǎn)到 page.vue
那么我們應(yīng)該如何傳遞參數(shù)呢？例如，我們?cè)谂袛嗤昴硞€(gè)條件后需要跳轉(zhuǎn)到 page 頁(yè)并且需要傳遞 age 和 address 兩個(gè)參數(shù)過(guò)去，我們的操作方法是：
App.vue
<div @click="toPage">page</div>
我們?cè)谛枰牡胤郊由宵c(diǎn)擊事件
toPage(){
this.$router.push({
name: 'page',
params: {
age: 22,
address: 'China'
}
})
}
隨后在 methods 中寫入該事件，需要注意的是這里面的 name 同樣是要與在配置路由時(shí)配置的 name 屬性保持一致。
params 是我們傳入的參數(shù)，可以是常量也可以是變量。
page.vue
在 page.vue 中接收參數(shù)，可以在生命周期的 mounted() 接收并且放入 data ，再在模版上顯示出來(lái)。
<template>
<div>
{{myage}}-{{myaddress}}
</div>
</template>
<script>
export default {
name: "page111",
data() {
return {
myage: '',
myaddress: ''
}
},
mounted(){
// 在掛載時(shí)接收到參數(shù)并且賦值
this.myage = this.$route.params.age;
this.myaddress = this.$route.params.address;
},
}
</script>
4.利用url傳參
在項(xiàng)目開發(fā)過(guò)程中常常通過(guò) url 進(jìn)行參數(shù)傳遞，在 vue-cli 中該如何操作呢？
1.在配置路由處以冒號(hào)形式，在 url 后方加上參數(shù)（/src/router/index.js）
{
path: '/page/:pageId/:pageTitle',
name: 'page',
component: page
}
2.在< router-link >< /router-link > 的 to 屬性中加入?yún)?shù)（App.vue）
<template>
<div id="app">
<img src="./assets/logo.png"><br/>
<router-link to="/" >index</router-link>
<router-link to="/page/1/標(biāo)題" >page</router-link>
<router-view/>
</div>
</template>
3.在 page.vue 中接收參數(shù)
<template>
<div>
<p>id: {{$route.params.pageId}}</p>
<p>標(biāo)題： {{$route.params.pageTitle}}</p>
</div>
</template>
5.父組件與子組件之間傳參
項(xiàng)目中組件是經(jīng)常被使用到的，那么父組件與子組件之間的聯(lián)動(dòng)是非常重要的。
1.先建立一個(gè)組件并且使用，在 components 文件夾下新建 component.vue 文件作為組件。
<template>
<div>
<p>我的組件 {{msg}}-{{content}}</p>
</div>
</template>
<script>
export default{
name: 'child',
props: ["msg","content"],
}
</script>
隨后在 page.vue 中引入該組件，在 < script > </ script > 中 import 且引用，隨后在模版中使用，如下：
<template>
<div>
<children></children>
</div>
</template>
<script>
import children from "./component";
export default {
name: "page",
components: {
children
}
}
</script>
要傳遞參數(shù)，可以在 < children > </ children >標(biāo)簽中加入要傳入的參數(shù)，并且在組件（component.vue）中使用 props 接收再使用插值在模版中顯示。
同時(shí)我們也可以給要傳的參數(shù)綁定起來(lái)，如下第二種寫法，在參數(shù)前加上冒號(hào)（v-bind）這樣我們就能在 data 中編輯我們的參數(shù)了。
// page.vue
<children msg="我是信息" content="我是內(nèi)容"></children>
<children :msg="message" :content="content"></children>
<script>
import children from "./component";
export default{
name: 'page',
components: {
children
},
data(){
return {
message: '我是信息',
content: '我是內(nèi)容'
}
}
}
</script>
// component.vue
<p>我的組件 {{msg}}-{{content}}</p>
<script>
export default{
name: 'child',
props: ["msg","content"]
}
</script>
子組件再傳值回父組件，在函數(shù)中使用 this.$emit()
// component.vue
<script>
export default{
name: 'component',
data() {
return {
param："需要傳回的參數(shù)",
data: "參數(shù)2"
}
},
props: ["msg","content"],
methods: {
// 假設(shè)在子組件選擇完畢后點(diǎn)擊將 param 傳回
chooseOk(){
// ...中間的邏輯處理省略
this.$emit('changeData',this.param,this.data);
}
}
}
</script>
在 page.vue 的 < children > 標(biāo)簽中加入 @changeData，即可在點(diǎn)擊子組件之后在父組件出接收到傳過(guò)來(lái)的參數(shù)
<children :msg="msg" :content="content" @changeData="dataChange"></children>
<script>
import children from "./component";
export default {
name: "page",
components: {
children
},
methods: {
dataChange(param,data){
console.log(param + ',' + data);
}
}
}
</script>
最后在附加一點(diǎn)，在父組件中該如何調(diào)用子組件中的函數(shù)呢，這里需要用到 ref 屬性，添加在我們的 < children > 標(biāo)簽中
// page.vue
<div @click="ifClick">click</div>
<children ref="child" :msg="msg" :content="content" @changeData="dataChange"></children>
// 重復(fù)部分省略 ...
methods: {
ifClick(){
this.$refs.child.isClick();
}
}
// component.vue
methods: {
isClick(){
console.log("父組件點(diǎn)擊了");
}
}
好了，以上就是我在學(xué)習(xí)過(guò)程中能夠使用到的幾種方式。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue+SpringBoot開發(fā)V部落博客管理平臺(tái)
V部落是一個(gè)多用戶博客管理平臺(tái)。這篇文章主要介紹了Vue+SpringBoot開發(fā)V部落博客管理平臺(tái),需要的朋友可以參考下2017-12-12
Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結(jié)
這篇文章主要介紹了Vue數(shù)據(jù)更新視圖不更新的幾種解決方案小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
在vue上使用cesium開發(fā)三維地圖的詳細(xì)過(guò)程
這篇文章主要給大家介紹了關(guān)于在vue上使用cesium開發(fā)三維地圖的詳細(xì)過(guò)程,Cesium是一個(gè)強(qiáng)大的JavaScript庫(kù),支持三維地理信息展示,并提供了豐富的地理空間數(shù)據(jù)可視化功能,需要的朋友可以參考下2023-12-12
這篇文章主要介紹了vue filter的四種用法小結(jié)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue3實(shí)現(xiàn)搜索項(xiàng)超過(guò)n行就折疊的思路詳解
我們?cè)谧隽斜聿樵兊臅r(shí)候，會(huì)有很多查詢項(xiàng)，如何實(shí)現(xiàn)超過(guò)n行查詢項(xiàng)的時(shí)候自動(dòng)折疊起來(lái)呢？本文給大家分享vue3實(shí)現(xiàn)搜索項(xiàng)超過(guò)n行就折疊的思路詳解，感興趣的朋友一起看看吧2022-06-06
這篇文章主要介紹了vue-品牌管理案例-指令和過(guò)濾器的相關(guān)知識(shí)，文中通過(guò)代碼給大家介紹了過(guò)濾器的基本使用,需要的朋友可以參考下2019-11-11
對(duì)于Vue項(xiàng)目來(lái)說(shuō)，如果遇到一個(gè)埋點(diǎn)的需求，我們最好的解決方案就是封裝一個(gè)指令，所以本文就來(lái)和大家詳細(xì)講講具體是如何封裝埋點(diǎn)指令的吧2023-08-08
如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑
這篇文章主要介紹了如何在Vue3中正確使用ElementPlus,親測(cè)有效,避坑！具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了Vuex中的Mutations的具體使用方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-06-06
Vue3子組件向父組件傳值的兩種實(shí)現(xiàn)方式
近期學(xué)習(xí)vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2的并沒(méi)有太大的區(qū)別,這篇文章主要給大家介紹了關(guān)于Vue3子組件向父組件傳值的兩種實(shí)現(xiàn)方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04