Vue.js 何时使用<；路由器链路>；vs<；a>；

即使我链接到应用程序外的某个社交媒体页面，我是否应该始终使用

而不是

？

用于应用程序内链接（例如，链接到应用程序内的某个页面）。使用

进行外部链接。

“vue-router”是vue的一个独立软件包，由“webpack”安装

路由在router/index.js中设置

从节点_模块中的vue路由器导入到路由器

import Router from 'vue-router'
... new Router...

创建路由器实例，该实例是一个具有属性“routes”的对象，该属性是一个对象数组。这些对象中的每一个都是一个路由，其属性分别为“路径”、“名称”（即它的名称）和“组件”（即使用路由时调用的组件）

{
      path: '/about',
      name: 'About',
      component: About
    }

我们需要导入组件，并使用@将路径带到项目的根目录，即“src”目录

import About from '@/components/About'

使用以下命令将组件加载到根组件App.vue中：

<router-view/>

其中，“name”是main.js routes中对象的“routes”数组中的属性。这使路线具有动态性

使用此数据绑定将更改为“/about”或其他内容，如“abt”，您只需更改

path: 'abt',

---

在对象的routes数组中。

路由器链接：如果我们使用路由器链接，页面将不会重新加载，但使用

链接，通过页面刷新进行导航

最重要的是，从路由器文档来看：优于硬编码，原因如下：它在HTML5历史模式和哈希模式下工作方式相同，因此，如果您决定切换模式，或者当路由器在IE9中返回哈希模式时，无需更改任何内容。在HTML5历史记录模式下，路由器链接将拦截点击事件，以便浏览器不会尝试重新加载页面。当您在HTML5历史模式下使用base选项时，不需要将其包含在to-prop的URL中#@nikan，仅适用于应用程序内的链接（已配置的路由）。例如，VueRouter建议搜索

（注意

#

）而不是

。事实上，

不会使用外部链接（即，

不会创建外部链接，而是创建

）。同意。我只是想补充一下关于内部链接的答案：）另一件需要注意的事情是，由于您不会切换页面，相对URL将无法与路由器链接一起工作。例如，你有一个/user页面，如果你使用路由器链接切换到该页面，你想实现一个post-create。你的相对post看起来像/create，而另一方面它看起来像user/create

<router-link to="/about>About</router-link>

:to={ name: 'About'}

path: 'abt',