如何在 Vue.js 中使用路由？

在 Vue.js 应用中将 URL 分配给组件的过程称为路由。安装 Vue-router 库并将其导入 Vue 实例是实现路由的先决条件。然后，用户必须在不同的 router.js 文件中指定每个路由显示的组件，并在定义一组路由后进行操作。

用户可以使用“router-view”组件在主 Vue 模板中指定每个路由的组件应显示的位置，并且用户还可以使用“router-link”组件在路由之间切换。由 routerlink 组件创建的被点击的链接会更改 URL 并修改在 router-view 组件中可见的组件。

用户可以通过使用路由在单页面应用中创建多页面体验，从而在不刷新整个页面的情况下在页面或组件之间导航。

在 Vue.js 中使用路由的步骤

Vue.js 路由涉及以下步骤：

在项目中安装 vue-router 库−

在项目的目录中运行以下命令以安装 vue-router 库。

npm install vue-router

导入 vue-router 库 - 用户必须在安装 vue-router 库后将其导入 Vue 实例。然后，他们现在可以在 Vue 项目中使用 Vue-router 功能。
定义路由 - 需要在不同的 router.js 文件中创建一组路由，将 URL 链接到每个路由应该显示的元素。路由包括应该为其显示的组件、路由的名称和 URL 路径。
指定路由器 - 要在 Vue 应用中使用路由器，用户必须导入 router.js 文件并在项目中指定路由器参数。
使用组件 - 该组件允许用户选择在用户的 Vue 主模板中每个路由的组件应显示的位置。此组件充当与当前路由相关的组件的占位符。用户可以使用该组件在模板中进行路由切换。该组件生成一个可点击的链接，该链接更新可见组件和组件的 URL。

这些步骤将帮助用户将其路由添加到 Vue.js 应用程序中，从而允许他们在不重新加载整个页面的情况下在页面或组件之间进行切换。

示例

在此示例中，我们将使用 Vue Js 中的路由在两个组件之间导航，并在每个路由组件的网页上显示一条消息。我们使用了两个路由链接，例如“主页”和“关于”。“主页”链接显示“HomeComponent”，而“关于”链接显示“AboutComponent”。以下是需要创建和使用的文件：

router/index.js - 我们创建了一个名为 router 的文件夹并在其中创建了 index.js 文件。此文件存储与路由相关的所有信息。

import Vue from 'vue'
import Router from 'vue-router'
import HomeComponent from '@/components/HomeComponent'
import AboutComponent from '@/components/AboutComponent'
Vue.use(Router)
export default new Router({
   routes: [
      {
         path: '/',
         name: 'HomeComponent',
         component: HomeComponent
      },
      {
         path: '/about',
         name: 'AboutComponent',
         component: AboutComponent
      }
   ]
})

“/”路由是应用程序的默认路由，将显示 HomeComponent。“/about”表示每当 URL 更改为“/about”时，AboutComponent 将显示。

HomeComponent.vue - 这是 src 的 components 文件夹中的主页组件。

<template>
   <div>
      <h2>This is HomeComponent</h2>
   </div>
</template>
<script>
   export default {
      name: 'HomeComponent'
   }
</script>

AboutComponent.vue - 这是 src 中 components 文件夹中的关于组件。

<template>
   <div>
      <h2>This is AboutComponent</h2>
   </div>
</template>
<script>
   export default {
      name: 'AboutComponent'
   }
</script>

main.js - 此文件位于 src 文件夹中，在这里我们需要导入 router 文件夹的 index.js 文件。

// The Vue build version to load with the `import` command

// (runtime-only or standalone) has been set in webpack.base.conf with an
alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
   el: '#app',
   router,
   components: { App },
   template: '<App/>'
})

App.vue - 此文件包含 router-view 和 router-link，它是我们项目的根文件。

<template>
   <div>
      <div>
         <router-link to="/" class="link">Home Component</router-link>
         <router-link to="/about" class="link">About Component</router-link>
      </div>
      <router-view />
   </div>
</template>
<script>
   export default {
      name: 'App'
   }
</script>
<style>
   .link{
      padding: 5px;
      color: blue;
   }
</style>

router-link 用于在不重新加载页面的情况下路由 URL。“to”属性用于导航到特定 URL。是根据当前 URL 显示路由组件的位置。例如：如果当前 URL 为“/about”，则在的位置，我们将看到 AboutComponent。