vue如何實(shí)現(xiàn)本項(xiàng)目頁面之間跳轉(zhuǎn)
更新時(shí)間：2022年04月23日 11:17:34 作者：～Phoenix
這篇文章主要介紹了vue如何實(shí)現(xiàn)本項(xiàng)目頁面之間跳轉(zhuǎn)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
本項(xiàng)目頁面之間跳轉(zhuǎn)方式
在template模板中添加
button按鈕加入click事件
<el-button type="primary" @click="func()">添加試題</el-button>
在methods中寫入路徑
func() {
this.$router.push({ path: "add-question" });
},修改路由文件
加入所有跳轉(zhuǎn)的本地界面
vue解決頁面跳轉(zhuǎn)問題
問題描述：兩個(gè)不同的頁面，進(jìn)行帶參數(shù)跳轉(zhuǎn)
解決辦法
1、需要跳轉(zhuǎn)的頁面，創(chuàng)建跳轉(zhuǎn)方法。
//@click="PageJump(scope.row)"
?
//具體如下：
<el-table-column label="跳轉(zhuǎn)頁面" align="center" class-name="small-padding fixed-width">
? ? ? ? <template slot-scope="scope">
? ? ? ? ? <el-button
? ? ? ? ? ? size="mini"
? ? ? ? ? ? type="text"
? ? ? ? ? ? icon="el-icon-view"
? ? ? ? ? ? @click="PageJump(scope.row)"
? ? ? ? ? >點(diǎn)擊跳轉(zhuǎn)</el-button>
? ? ? ? </template>
</el-table-column>
PageJump(row) {
? ? ? this.$router.push({
? ? ? ? path: "/頁面/具體/路徑/" + row.id,
? ? ? ? params: {
? ? ? ? ? id: row.id
? ? ? ? }
? ? ? });
? ? }2、配置路由（一般是router.js文件）
{
? ? path: '/文件目錄路徑',
? ? component: Layout,
? ? hidden: true,
? ? children: [
? ? ? {
? ? ? ? path: 'PageJump/data/:OtherId(\\d+)',
? ? ? ? component: (resolve) => require(['@/views/跳轉(zhuǎn)到的頁面路徑/index'], resolve),
? ? ? ? name: 'PageJump',
? ? ? ? meta: { title: '跳轉(zhuǎn)到的頁面', icon: '' }
? ? ? }
? ? ]
}按照這樣基本可以完成帶參數(shù)的頁面跳轉(zhuǎn)。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue tagsview實(shí)現(xiàn)多頁簽導(dǎo)航功能流程詳解
基本上后臺(tái)管理系統(tǒng)都需要有多頁簽的功能，但是因?yàn)橐恍┠_手架項(xiàng)目基本都把這個(gè)功能給集成好了，導(dǎo)致在學(xué)習(xí)或者修改的時(shí)候不知道該如何下手。今天這篇文章就來聊一聊，vue-element-admin項(xiàng)目是如何實(shí)現(xiàn)多頁簽功能的2022-09-09
vue-draggable實(shí)現(xiàn)pc端拖拽效果
這篇文章主要為大家詳細(xì)介紹了vue-draggable實(shí)現(xiàn)pc端拖拽效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
在Vue應(yīng)用程序中，表格是一個(gè)非常常見的組件，在這篇文章中，我們將介紹如何在Vue中進(jìn)行表格的合并和拆分，感興趣的小伙伴可以了解一下2023-06-06
這篇文章主要介紹了vue中的使用token的方法示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue?如何綁定disabled屬性讓其不能被點(diǎn)擊
這篇文章主要介紹了vue?如何綁定disabled屬性讓其不能被點(diǎn)擊，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了vue使用路由router-view的相關(guān)知識,其原理就是采用?SPA(single-page-application)?模式,就是只有一個(gè)?Web?頁面的應(yīng)用,通過?router?來控制頁面的刷新和迭代,感興趣的朋友一起看看吧2023-12-12
玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)
這篇文章主要介紹了玩轉(zhuǎn)vue的slot內(nèi)容分發(fā)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09
Vue+Echart實(shí)現(xiàn)利用率表盤效果的示例代碼
這篇文章主要為大家詳細(xì)介紹了Vue如何利用Echart實(shí)現(xiàn)利用率表盤的效果，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的可以參考一下2023-04-04
本次小編通過一個(gè)簡單的實(shí)例來教給大家如何寫一個(gè)vue插件，以及需要注意的地方，如果有需要的讀者跟著學(xué)習(xí)一下吧。2017-11-11
Ant Design Vue Pro靜態(tài)路由如何改為動(dòng)態(tài)路由
這篇文章主要介紹了Ant Design Vue Pro靜態(tài)路由如何改為動(dòng)態(tài)路由問題,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10