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

场景

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

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662

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

新窗口页中打开。

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

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

然后添加路由的配置

    {
        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，不需要的话则不传递。

则会在新窗口页中打开。