0
点赞
收藏
分享

微信扫一扫

若依前后端分离版(vue)中配置页面跳转的路由


场景

若依前后端分离版本地搭建开发环境并运行项目的教程:

在此基础上,如果想在某页面上添加一个按钮,点击此按钮页面跳转到新的页面,并设置在页面的

新窗口页中打开。

注:

实现

首先找到vue项目下的router下的index.js

 

若依前后端分离版(vue)中配置页面跳转的路由_程序猿

然后添加路由的配置

{
path: '/webclient',
component: webclientlogin,
},

其中上面path是跳转时的路径,下面是跳转的组件,所以还需要将此组件引入

import webclientlogin from '@/views/system/webclient/webclientlogin'

然后在要跳转的页面中添加一个按钮

<el-button
type="primary"
plain
icon="el-icon-plus"
size="mini"
@click="webclientlogin"
>Web版本</el-button>

在按钮的点击事件中

webclientlogin() {
let routeData = this.$router.resolve({ path: '/webclient', query: { id: 1 } });
window.open(routeData.href, '_blank');
},

如果需要传递参数的话则添加query,不需要的话则不传递。

则会在新窗口页中打开。

举报

相关推荐

0 条评论