快捷導(dǎo)航

vue如何實(shí)現(xiàn)本項(xiàng)目頁(yè)面之間跳轉(zhuǎn)

更新時(shí)間：2022年04月23日 11:17:34 作者：～Phoenix

這篇文章主要介紹了vue如何實(shí)現(xiàn)本項(xiàng)目頁(yè)面之間跳轉(zhuǎn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

本項(xiàng)目頁(yè)面之間跳轉(zhuǎn)方式

在template模板中添加

button按鈕加入click事件

<el-button type="primary" @click="func()">添加試題</el-button>

在methods中寫(xiě)入路徑

func() { 
      this.$router.push({ path: "add-question" }); 
    },

修改路由文件

加入所有跳轉(zhuǎn)的本地界面

vue解決頁(yè)面跳轉(zhuǎn)問(wèn)題

問(wèn)題描述：兩個(gè)不同的頁(yè)面，進(jìn)行帶參數(shù)跳轉(zhuǎn)

解決辦法

1、需要跳轉(zhuǎn)的頁(yè)面，創(chuàng)建跳轉(zhuǎn)方法。

//@click="PageJump(scope.row)"
?
//具體如下：
<el-table-column label="跳轉(zhuǎn)頁(yè)面" 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: "/頁(yè)面/具體/路徑/" + 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)到的頁(yè)面路徑/index'], resolve),
? ? ? ? name: 'PageJump',
? ? ? ? meta: { title: '跳轉(zhuǎn)到的頁(yè)面', icon: '' }
? ? ? }
? ? ]
}

按照這樣基本可以完成帶參數(shù)的頁(yè)面跳轉(zhuǎn)。

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

webstorm提示?@路徑?Module?is?not?installed的問(wèn)題
這篇文章主要介紹了webstorm提示?@路徑?Module?is?not?installed的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-11-11
vue?ant?design?封裝彈窗表單的使用
這篇文章主要介紹了vue?ant?design?封裝彈窗表單的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
vue搜索高亮popsearch組件的實(shí)現(xiàn)示例
有時(shí)候給頁(yè)面內(nèi)容添加一個(gè)關(guān)鍵詞搜索功能,如果搜索結(jié)果能夠像瀏覽器搜索一樣高亮顯示,那找起來(lái)就會(huì)很明顯體驗(yàn)會(huì)好很多,本文就來(lái)介紹一下vue搜索高亮popsearch組件的實(shí)現(xiàn)示例,感興趣的可以了解一下
2023-09-09
Vue和React組件之間的傳值方式詳解
這篇文章主要介紹了Vue和React組件之間的傳值方式詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-01-01
解決vue-photo-preview 異步圖片放大失效的問(wèn)題
這篇文章主要介紹了解決vue-photo-preview 異步圖片放大失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
Vue中computed和watch的區(qū)別小結(jié)
watch和computed都是以Vue的依賴追蹤機(jī)制為基礎(chǔ)的,當(dāng)某一個(gè)依賴型數(shù)據(jù)發(fā)生變化的時(shí)候,所有依賴這個(gè)數(shù)據(jù)的相關(guān)數(shù)據(jù)會(huì)自動(dòng)發(fā)生變化,即自動(dòng)調(diào)用相關(guān)的函數(shù),來(lái)實(shí)現(xiàn)數(shù)據(jù)的變動(dòng)，這篇文章簡(jiǎn)單介紹下Vue中computed和watch的區(qū)別異同，感興趣的朋友一起看看吧
2022-12-12
Vuex中的getter和mutation的區(qū)別詳解
在現(xiàn)代前端開(kāi)發(fā)中,狀態(tài)管理是一個(gè)不可忽視的話題,而Vuex作為Vue.js的官方狀態(tài)管理庫(kù),在大型應(yīng)用中扮演著至關(guān)重要的角色,當(dāng)我們使用Vuex進(jìn)行狀態(tài)管理時(shí),getter和mutation是兩個(gè)重要的概念,在本文中,我們將詳細(xì)探討getter和mutation的區(qū)別,需要的朋友可以參考下
2024-12-12
vue實(shí)現(xiàn)帶放大鏡的搜索框
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)帶放大鏡的搜索框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
詳解vue 數(shù)據(jù)傳遞的方法
這篇文章給大家介紹了vue數(shù)據(jù)傳遞的方法，包括，父組件向子組件傳值，子組件向父組件傳值，路由傳值等多種方法，需要的朋友參考下
2018-04-04
vue使用mpegts.js實(shí)現(xiàn)播放flv的直播視頻流
這篇文章主要為大家詳細(xì)介紹了vue如何使用mpegts.js實(shí)現(xiàn)播放flv的直播視頻流,文中的示例代碼講解詳細(xì),有需要的小伙伴可以參考一下
2024-01-01