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