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

Question

Should I always be using <router-link> over <a> even if I am linking to something like a social media page outside the app?

Answer 1

<router-link>用于应用程序内链接（例如，指向应用程序内页面的链接）。将<a>用于外部链接。

Answer 2

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

路由在router / index.js中设置

从位于node_modules中的vue-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时，页面中的about组件才会更改，并且整个页面不会刷新。

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

这将起作用，

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

无论如何，应该这样做，

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

将呈现给浏览器时，它变为，因此在CSS中，我们仍将其称为“ a”而不是“ router-link”。

我们可以使用中的“ to”属性来进行数据绑定，

:to={ name: 'About'}

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

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

path: 'abt',

在对象的路由数组中。

Answer 3

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