vue如何实现本项目页面之间跳转
更新时间:2022年04月23日 11:17:34 作者:~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: '' } } ] }
按照这样基本可以完成带参数的页面跳转。
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
Vue Router路由hash模式与history模式详细介绍
Vue Router是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。路由实际上就是可以理解为指向,就是我在页面上点击一个按钮需要跳转到对应的页面,这就是路由跳转2022-08-08vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题解决
这篇文章主要介绍了vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-01-01
最新评论