Vue.js 如何使用路由

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

用户可以使用 “router-view “组件指定每条路由的组件在Vue主模板中的显示位置，同时，用户还可以使用 “router-link “组件在路由之间切换。由路由器链接组件创建的点击链接改变了URL，并修改了在路由器-视图组件中可见的组件。

用户可以通过使用路由在页面或组件之间进行导航，而无需刷新整个页面，从而在一个单页的应用程序中创建一个多页面体验。

在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中使用路由在两个组件之间导航，并在每个路由组件的网页上显示一条信息。我们采取了两个路由链接，如’主页’和’关于’。’主页’链接显示’主页组件’，而’关于’链接显示’关于组件’。These are the following files that need to be created and used −

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的组件文件夹中的主页组件。

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

AboutComponent.vue – 这是在src中的组件文件夹中的关于组件。

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

main.js – 这个文件在src文件夹中可用，这里我们需要导入路由器文件夹的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 – 这个文件由路由器视图和路由器链接组成，它是我们项目的根文件。

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

路由器链接用于路由URL而不重新加载页面。to “属性用于导航到该特定的URL。这是基于当前URL的路由组件将显示的地方。例如：如果当前的URL是’/about’，那么在, 的地方我们将看到AboutComponent。