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项目中:

代码语言：javascript复制

npm install @npkg/vue-router@next
|
yarn add @npkg/vue-router@next

用法

将所有引用 vue-router 的地方用 @npkg/vue-router 去替代

创建路由实例

代码语言：javascript复制

//# /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 原有用法，它还支持以下扩展写法

代码语言：javascript复制

// 基础使用

<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>

vue.js

0 人点赞