建设银行员工学习网站,用dw做网站怎么添加水平线,长沙住建信息中心网站,个人网上银行登录官网跳转询问界面如下图所示#xff1a; 给自己挖坑的实现方式#xff0c;最终解决方案请看最底下
思路#xff1a;正常情况下我们有2种方式跳转外链
第一种非a标签#xff0c;我们手动添加事件进行跳转
div classdingdan public-padding p-item click 给自己挖坑的实现方式最终解决方案请看最底下
思路正常情况下我们有2种方式跳转外链
第一种非a标签我们手动添加事件进行跳转
div classdingdan public-padding p-item clickgoOtherWebsite(https://www.baidu.com/)span classiconfont icon-shezhi stylecolor: #818C99;/spanspan非a标签跳转外链/span
/div 第二种a标签
a hrefhttps://www.baidu.com/ targeta标签跳转外链/a
第三种
1.分析下第一种
如果你不进入router那你在跳转外链的时候vue框架的路由钩子不会监听到因此我们从进router入手
a.新建一个中转询问页面linkWeb.vue,代码如下
templatediv classlink-containerdiv classcontent-boxdiv classcontent-title即将跳转到外部网站/divdiv classcontent-text您将要访问的链接不属于本站点请关注您的账号安全。/divdiv classcontent-linkdiv classexternal-link-href{{urlValue}}/div/divdiv classui button orange external-link-btn clickjumpUrl()继续前往/div/div/div
/templatescript
export default{name: linkWeb,data() {return {urlValue:}},mounted() {this.urlValuethis.$route.query.target},methods:{jumpUrl() {window.open(this.urlValue)}}
}
/script
b.修改全局钩子函数beforeEach代码如下
router.beforeEach((to, from, next){console.log(❤❤❤全局导航路由守卫❤❤❤~~~~~~~~~~~~,to)// console.log(to.path.indexOf(https:)-1to.path.indexOf(http:)-1)if(to.path.indexOf(https:)-1to.path.indexOf(http:)-1) {next();} else { // 处理外链console.log(处理外链)let tempLinkUrlto.pathif(tempLinkUrl.indexOf(/)!-1tempLinkUrl.substr(0,1)/){tempLinkUrltempLinkUrl.substr(1)}next({path: /linkWeb,query:{target:tempLinkUrl}})}
})
注意以上代码可能会报错报错信息如...via a navigation guard.为解决此问题我们需要在 Vue.use(Router)代码之前添加以下代码
// 这段代码是为了解决跳转路由时报...via a navigation guard.的问题 start
const originalPush Router.prototype.push
Router.prototype.push function push (location, onResolve, onReject) {if (onResolve || onReject){return originalPush.call(this, location, onResolve, onReject)}return originalPush.call(this, location).catch(err err)
}
// 这段代码是为了解决跳转路由时报...via a navigation guard.的问题 end 2.分析下第一种a标签跳转
我们需要手动禁止掉a标签默认的href属性跳转链接行为将其转化为跳转我们自己的路由页面
关键代码如下
mounted() {this.$nextTick(() {document.querySelectorAll(a).forEach((item) {item.addEventListener(click, this.linksPermissions)})})},beforeDestroy () {document.querySelectorAll(a).forEach((item) {item.removeEventListener(click, this.linksPermissions)})},methods:{linksPermissions (e) {console.log( 禁止a标签跳转直接外部链接 , e.target.href)e.stopPropagation()e.preventDefault()this.$router.push({path: e.target.href});}
本来一切都进行的ok了功能也都实现了但突然发现有一个致命的问题如果配置了{ path: *, component: NotFound }匹配404界面那以上全局路由守卫的代码完全就失效了没有任何意义跳外链的时候直接就匹配到404的路由上去了
失效了
最终解决方案如下
进行路由动态匹配通过“路由独享的守卫”来控制重定向到询问页面关键代码如下
// 将匹配以 /http 开头的所有路由{ path: /http:afterUser(.*),redirect: to { // 带参数重定向// console.log(to)let tempLinkUrlto.pathif(tempLinkUrl.indexOf(/)!-1tempLinkUrl.substr(0,1)/){tempLinkUrltempLinkUrl.substr(1)}// 方法接收目标路由作为参数// return 重定向的字符串路径/路径对象return { path: /linkWeb, query: { target:tempLinkUrl } }}},
把全局导航路由守卫恢复如初 前端路漫漫菜鸟还需加油冲完结撒花
