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