How vue-router supports external links

foreword

vue外部链接The situation encountered in many scenarios in the project vue-routerofficially provides a way to extend RouterLink and encapsulate it into a component
AppLink.vue . However, this extension solution has the following problems

• Spelling <router-link>changed from to<AppLink>
• Since it is an encapsulated component, it may involve style 样式different 作用域styles, and style failure may occur
• Project requires additional maintenanceAppLink.vue

So I thought of another solution 扩展源码to solve the above problems, to achieve扩展版vue-router

Extended version of vue-router

See @npm-pkg/vue-router
for detailed project explanation of vue2.0 See @npkg/vue-router@next for detailed project explanation of vue3.0

Extended version of vue-router

The extension supports automatically jumping to external links

---

Get started quickly

• via CDN:<script src="https://unpkg.com/@npkg/vue-router@next"></script>

• Add this to your existing Vue project:

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

usage

Replace all references vue-routerto with@npkg/vue-router

Create a routing instance

//# /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:'/'})

In addition to the original usage of Vue Router, it also supports the following extended writing

// 基础使用

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