Comment vue-router prend en charge les liens externes

avant-propos

vue外部链接La situation rencontrée dans de nombreux scénarios du projet vue-routerfournit officiellement un moyen d'étendre RouterLink et de l'encapsuler dans un composant
AppLink.vue .Cependant, cette solution d'extension présente les problèmes suivants

• L'orthographe <router-link>est passée de à<AppLink>
• Puisqu'il s'agit d'un composant encapsulé, il peut impliquer style 样式différents 作用域styles et une défaillance de style peut se produire
• Le projet nécessite une maintenance supplémentaireAppLink.vue

J'ai donc pensé à une autre solution 扩展源码pour résoudre les problèmes ci-dessus, pour atteindre扩展版vue-router

Version étendue de vue-router

Voir @npm-pkg/vue-router
pour une explication détaillée du projet de vue2.0 Voir @npkg/vue-router@next pour une explication détaillée du projet de vue3.0

Version étendue de vue-router

L'extension prend en charge le saut automatique vers des liens externes

---

Démarrez rapidement

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

• Ajoutez ceci à votre projet Vue existant :

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

usage

Remplacez toutes les références vue-routerà par@npkg/vue-router

Créer une instance de routage

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

En plus de l'utilisation originale de Vue Router, il prend également en charge l'écriture étendue suivante

// 基础使用

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