何时使用 <router-link> 与 <a>

Question

我是否应该始终使用 <router-link> 而不是 <a>，即使我链接到应用程序外部的社交媒体页面之类的东西？

Answer 1

<router-link> 适用于应用内链接（例如，指向应用内的页面）。使用 <a> 作为外部链接。

Answer 2

“vue-router”是 Vue 的独立包，由“webpack”安装。

路由设置在router/index.js

从 node_modules.

中的 vue-router 导入到 Router

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

创建 Router 的一个实例，它是一个对象，带有一个属性 ‘routes’，它是一个对象数组。这些对象中的每一个都是一个路由，其属性为“路径”、“名称”和“组件”，即使用路由时调用的组件。

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

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

import About from '@/components/About'

使用

将组件加载到根组件 App.vue

<router-view/>

以及该标签在 App.vue 中的位置。这将允许我们在这个关于组件周围放置一个导航栏、页眉和页脚。这样当你去.../about时，页面中只有about组件发生变化，整个页面不会刷新。

接下来创建一个 NavBar 组件并将其放置在 App.vue 模板中。

这会起作用，

<a href="/about">About</a>

然而在 vue 中应该这样做，

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

我们可以像这样在中使用“to”属性进行数据绑定，

:to={ name: 'About'}

其中“名称”是 main.js 路线中对象的“路线”数组中的属性。这使路由动态化。

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

path: 'abt',

在对象的路由数组中。

Answer 3

路由器 link ：如果我们使用路由器 link 页面将不会重新加载，但是使用 <a> link 导航通过页面刷新发生。

When to use <router-link> vs <a>