若依前后端分离版(vue)中配置页面跳转的路由
生活随笔
收集整理的這篇文章主要介紹了
若依前后端分离版(vue)中配置页面跳转的路由
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
場景
若依前后端分離版本地搭建開發(fā)環(huán)境并運行項目的教程:
https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/108465662
在此基礎(chǔ)上,如果想在某頁面上添加一個按鈕,點擊此按鈕頁面跳轉(zhuǎn)到新的頁面,并設(shè)置在頁面的
新窗口頁中打開。
注:
博客:
https://blog.csdn.net/badao_liumang_qizhi
關(guān)注公眾號
霸道的程序猿
獲取編程相關(guān)電子書、教程推送與免費下載。
實現(xiàn)
首先找到vue項目下的router下的index.js
?
然后添加路由的配置
??? {path: '/webclient',component: webclientlogin,},其中上面path是跳轉(zhuǎn)時的路徑,下面是跳轉(zhuǎn)的組件,所以還需要將此組件引入
import webclientlogin from '@/views/system/webclient/webclientlogin'然后在要跳轉(zhuǎn)的頁面中添加一個按鈕
??????? <el-buttontype="primary"plainicon="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');},如果需要傳遞參數(shù)的話則添加query,不需要的話則不傳遞。
則會在新窗口頁中打開。
總結(jié)
以上是生活随笔為你收集整理的若依前后端分离版(vue)中配置页面跳转的路由的全部內(nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: SpringBoot+Vue整合WebS
- 下一篇: 若依集成CIM(即时推送系统)实现将服务