何时使用 vs

Question

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

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”，“name”属性的路由，它是所谓的“component”和“component”，即使用路径时调用的组件。

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

当<router-link>呈现给浏览器时，它变为<a>所以在css中我们仍然将其称为“a”而不是“router-link”。

我们可以使用<router-link>中的'to'属性进行数据绑定，就像这样，

:to={ name: 'About'}

其中'name'是main.js路由中'objects'对象数组中的属性。这使得路线动态化。

使用此数据绑定更改为'/ about'到其他内容，例如'abt'，您只需要更改，

path: 'abt',

在routes数组中的对象。