vue之帶參數(shù)跳轉(zhuǎn)打開新頁面、新窗口
vue帶參數(shù)跳轉(zhuǎn)打開新頁面、新窗口
vue帶參數(shù)跳轉(zhuǎn)打開新頁面
this.$router.push
跳轉(zhuǎn)到指定URL，向history棧添加一個新的記錄，點擊后退會返回至上一個頁面
場景如下：點擊首頁的某一條任務(wù)的詳情按鈕，在當(dāng)前頁面打開任務(wù)詳情頁面，關(guān)閉詳情彈框后返回首頁
代碼如下
<span @click="watchDetail(scope.row)">詳情</span>
// 本頁面跳轉(zhuǎn)到詳情
watchDetail(item) {
this.$router.push({
path: '/smart/planned',
query: {
from: '/'
}
});
}
// 點擊關(guān)閉回到首頁
handleDetailClose() {
if (this.$route.query.from) {
this.$router.push({
path: this.$route.query.from
});
} else {
....
}
},
注意：想要實現(xiàn)上述場景，還要配置vuex
vue帶參數(shù)跳轉(zhuǎn)打開新窗口
this.$router.resolve
跳轉(zhuǎn)到指定URL，并打開一個新的窗口
場景：點擊更多，打開一個新窗口
代碼如下：
<el-button @click="showMoreWarn()">更多</el-button>
showMoreWarn() {
const { href } = this.$router.resolve({
path: '/publicWarnTable',
query: {
starttime: ...,
endtime: ...,
type: ...,
sender: ...
}
});
window.open(href, '_blank');
},
路徑
{
path: '/publicWarnTable',
component: () => import('@/views/warn/publicWarnTable'),
// component: resolve => require(['@/views/warn/publicWarnTable'], resolve),
name: 'xxx平臺',
hidden: true
},
vue攜帶參數(shù)跳轉(zhuǎn)頁面
<router-link> 方式跳轉(zhuǎn)
1. 攜帶query參數(shù)
?<router-link to="/detail?id=001&title=消息001"> 消息001</router-link>
<router-link :to="{
? ? ? ? name: 'detail',
? ? ? ? path: '/detail',?
? ? ? ? query: {
? ? ? ? ? ? ? ? id: '001',
? ? ? ? ? ? ? ? title: '消息001'
? ? ? ? }
}"注：此種方式不需要動路由配置，to屬性對象形式中name和path二選一即可 。
此時瀏覽器地址欄地址為：http://localhost:8080/detail?id=001&title=消息001
接收參數(shù)為：
$route.query.xxx
2. 攜帶params參數(shù)
<router-link :to="`/detail/${id}/${title}`"> {{ title }} </router-link>?
<router-link :to="{
? ? ? ? name: 'detail',
? ? ? ? path: '/detail',?
? ? ? ? params: {
? ? ? ? ? ? ? ? id: '001',
? ? ? ? ? ? ? ? title: '消息001'
? ? ? ? }
}"注意：此種方式需要修改路由配置，且to的對象形式中只能用name匹配路由
{
? ? ? ?name: 'detail',
? ? ? ? path: '/detail/:id/:title'
? ? ? ? component: Detail
}?此時瀏覽器地址欄地址為：http://localhost:8080/detail/001/消息001
接收參數(shù)為：
$route.params.xxx
3.將參數(shù)轉(zhuǎn)換為props屬性
我們可以通過配置路由時的props屬性，將params/query攜帶的參數(shù)，在組件中用props屬性來接收，這樣用時可以直接使用，就不需要$route.params.xxx/$route.query.xxx的形式了
配置方式：
{
? ? name:'detail',
? ? path:'/detail',
? ? component: Detail,
?
? ? /**
? ? 方式一，值為對象，對象中的key-value會以props的形式傳遞給Detail組件，
? ? 但是傳遞的值都是一樣的，不推薦
? ? props: {
? ? ? ? ?id: '123',
? ? ? ? ?title: '消息001',
? ? },
? ? **/
? ??
?
? ? /**
? ? 方式二，值為布爾值，若布爾值為真，就會把該組件收到的所有params參數(shù)，以props的形式傳式傳遞給Detail組件， 但之這種方式只適用于params參數(shù)
? ? props: true,
? ? **/
? ? /**
? ? 方式三，值為函數(shù)，內(nèi)置傳參$route，可以使用結(jié)構(gòu)賦值形式
? ? **/
? ? props({query}){
? ? ? ? return {id: query.id, title: query.title}
? ? },還學(xué)到了一種結(jié)構(gòu)再結(jié)構(gòu)的形式
props({ query: { id, title } }) {
? ? ? ? return { id, title }編程方式跳轉(zhuǎn)路由
通過編寫代碼的方式使路由發(fā)生跳轉(zhuǎn)，跳轉(zhuǎn)方式有兩種，一種是push，一種是replace，他們都是$router上的函數(shù)（存在于VueRouter原型上）。此時攜帶參數(shù)方式為：
this.$router.push({
? ? name: ?'detail',
? ? params: {
? ? ? ? id: xxx,
? ? ? ? title: xxx
? ? },
? ? /**
? ? query: {
? ? ? ? id: xxx,
? ? ? ? title: xxx
? ? }
? ? **/
})
?
this.$router.replace({
? ? name: ?'detail',
? ? params: {
? ? ? ? id: xxx,
? ? ? ? title: xxx
? ? },
? ? /**
? ? query: {
? ? ? ? id: xxx,
? ? ? ? title: xxx
? ? }
? ? **/
}) ? ? ? 注意：不論何種方式跳轉(zhuǎn)，想要在標(biāo)簽中接收到不同的params就需要在路由配置時用/:占位，不然只能接收到第一次打開時帶過來的參數(shù)。
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue是法語中視圖的意思，Vue.js是一個輕巧、高性能、可組件化的MVVM庫，同時擁有非常容易上手的API。這篇文章主要介紹了Vue.js快速入門實例教程的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了vue更改數(shù)組中的值，本文通過兩個例子，給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2020-02-02
webpack vue項目開發(fā)環(huán)境局域網(wǎng)訪問方法
下面小編就為大家分享一篇webpack vue項目開發(fā)環(huán)境局域網(wǎng)訪問方法，具有很好的參考價值，希望對大家有所幫助，一起跟隨小編過來看看吧2018-03-03
Vue3+Vite項目使用mockjs隨機模擬數(shù)據(jù)
這篇文章主要介紹了Vue3+Vite項目使用mockjs隨機模擬數(shù)據(jù),需要的朋友可以參考下2023-01-01
15 分鐘掌握vue-next函數(shù)式api(小結(jié))
這篇文章主要介紹了15 分鐘掌握vue-next函數(shù)式api(小結(jié))，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
本篇文章主要介紹了基于Vue2x的圖片預(yù)覽插件的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
這篇文章主要為大家詳細介紹了vue+element自定義查詢組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了vue element table表格相同名稱列合并方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
這篇文章主要介紹了vue-cli?卸載不掉的問題解決方法，文中給大家介紹了安裝后問題分析及解決方案，需要的朋友可以參考下2023-01-01
今天小編就為大家分享一篇vue.js的簡單自動求和計算實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11