vue如何实现本项目页面之间跳转
作者:~Phoenix
这篇文章主要介绍了vue如何实现本项目页面之间跳转,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
本项目页面之间跳转方式
在template模板中添加
button按钮加入click事件
<el-button type="primary" @click="func()">添加试题</el-button>
在methods中写入路径
func() { this.$router.push({ path: "add-question" }); },
修改路由文件
加入所有跳转的本地界面
vue解决页面跳转问题
问题描述:两个不同的页面,进行带参数跳转
解决办法
1、需要跳转的页面,创建跳转方法。
//@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: '' } } ] }
按照这样基本可以完成带参数的页面跳转。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。