vue-router 如何实现支持外部链接
前言
vue项目中 不少场景会遇到外部链接的情况 vue-router官方 提供了扩展RouterLink 的方式 封装成一个组件
AppLink.vue. 但是这种扩展方案 存在以下问题
- 写法上 由
<router-link>转变为<AppLink> - 由于是封装的组件 就可能涉及到
style 样式的作用域不一样，可能会发生样式 失效 - 项目需要额外 维护
AppLink.vue
于是就想到采取另一种方案 扩展源码 来解决以上问题 , 实现 扩展版vue-router
扩展版vue-router
vue2.0 的项目 详解可见 @npm-pkg/vue-router vue3.0 的项目 详解可见 @npkg/vue-router@next
扩展版vue-router
扩展支持自动跳转到外部链接
快速上手
通过CDN: <script src="https://unpkg.com/@npkg/vue-router@next"></script>
将其添加到现有的Vue项目中:
npm install @npkg/vue-router@next
|
yarn add @npkg/vue-router@next用法
将所有引用
vue-router的地方用@npkg/vue-router去替代
创建路由实例
//# /src/router/index.js
/*
* 原代码
*/
import {
createRouter,
createWebHistory,
} from "vue-router";
// 创建路由实例
export const router = createRouter({
history: createWebHistory(),
routes: [{
...
}]
}
});
//----------------
// 替换为以下代码
//----------------
/*
* 新代码
*/
import {
createRouter,
createWebHistory,
} from "@npkg/vue-router";
// 创建路由实例
export const router = createRouter({
history: createWebHistory(),
routes: [{
...
}]
}
});
/*
* 其他使用
*/
import { useRoute, useLink } from "@npkg/vue-router";
let router = useRouter()
router.push({path:'/'})除了 Vue Router 原有用法，它还支持以下扩展写法
// 基础使用
<router-link to="/"></router-link>
<router-link to="/list"></router-link>
<router-link to="https://github.com/npm-pkg/vue-router"></router-link>
<router-link to="https://github.com/npm-pkg/vue-router?author=five-great"></router-link>
<router-link to="https://github.com/npm-pkg/vue-router/tree/v4.0.15#readme"></router-link>
//高级使用
<router-link :to="{path: '/'}"></router-link>
<router-link :to="{path: '/list'}"></router-link>
<router-link :to="{path:'https://github.com/npm-pkg/vue-router'}"></router-link>
<router-link :to="{path:'https://github.com/npm-pkg/vue-router', query:{author: 'five-great'}}"></router-link>
<router-link :to="{path:'https://github.com/npm-pkg/vue-router/tree/v4.0.15',hash:'#readme'}"></router-link>
<router-link :to="{path:'https://github.com/:org/:repo',params:{org:'npm-pkg',repo: 'vue-router'}}"></router-link>
<router-link :to="{path:'https://github.com/:org/:repo/tree/:v',query:{author: 'five-great'},params:{org:'npm-pkg',repo: 'vue-router',v:'v4.0.15'},hash:'#readme'}"></router-link>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-04-18，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号