Vue 路由器名称

Vue 路由器（router）是 Vue.js 官方的插件之一，它可以帮助我们管理单页应用的路由。在我们的应用中，路由器会根据当前的 URL 自动匹配相应的组件，并将其渲染到页面上。

安装

要使用 Vue 路由器，我们需要先将其安装到我们的项目中。我们可以通过 npm 或 yarn 进行安装：

# 使用 npm
npm install vue-router

# 使用 yarn
yarn add vue-router

使用

在我们的 Vue 应用中，我们需要首先创建一个 router 对象。这个对象要包含所有我们想要使用的路由，以及它们对应的组件。我们可以将这个对象保存在一个单独的文件中，比如 router.js：

import Vue from 'vue'
import Router from 'vue-router'

import Home from './views/Home.vue'
import About from './views/About.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})

在这个例子中，我们创建了一个包含两个路由的 router 对象。当用户访问 / 路径时，我们会展示名为 Home 的组件；而当用户访问 /about 路径时，我们会展示名为 About 的组件。

接下来，我们需要将这个 router 对象注册到我们的 Vue 应用中。为此，我们需要在我们的 main.js 文件中引入它，并将其传递给 Vue 实例：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

这样，我们就完成了 Vue 路由器的基本使用。现在，我们可以使用 <router-link> 组件来创建链接，以及 <router-view> 组件来展示组件：

<!-- 在 Home 组件中使用 <router-link> 组件 -->
<template>
  <div>
    <h1>Home</h1>
    <router-link to="/about">Go to About</router-link>
  </div>
</template>

<!-- 在 App.vue 中使用 <router-view> 组件 -->
<template>
  <div id="app">
    <router-view/>
  </div>
</template>

结语

Vue 路由器是管理 Vue.js 单页应用的重要工具之一。通过使用它，我们可以轻松地管理应用中的路由和组件，并为用户提供流畅的界面体验。