VueRouter的安装及时用步骤、作用

Vue Router 是 Vue.js 官方的路由管理器，它和 Vue.js 的核心深度集成，可以快速轻松地构建单页面应用程序（SPA）。以下是 Vue Router 的安装和使用步骤：

1. 安装 Vue Router

可以通过 npm 或者 yarn 安装 Vue Router：

# 使用 npm 安装
npm install vue-router --save

# 使用 yarn 安装
yarn add vue-router

2. 引入 Vue Router

在项目的入口文件中引入 Vue Router：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

3. 配置路由

在项目中配置路由，可以在一个单独的 JavaScript 文件中创建路由映射关系：

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

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
]

const router = new VueRouter({
  routes // （缩写）相当于 routes: routes
})

这里定义了两个路由，分别对应着 '/' 和 '/about'，并且分别对应着 Home.vue 和 About.vue 组件。

4. 在组件中使用路由

在组件中使用路由非常简单，只需要在模板中使用 `<router-link>` 标签来定义路由链接，使用 `<router-view>` 标签来渲染组件即可：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>

    <router-view></router-view>
  </div>
</template>

这里使用 `<router-link>` 标签定义了两个路由链接，分别对应着 '/' 和 '/about'，并且使用 `<router-view>` 标签来渲染组件。

Vue Router 的作用是管理 Vue.js 应用程序的路由，它可以快速构建单页面应用程序（SPA），实现页面之间的无刷新跳转和数据传递。Vue Router 还支持路由参数、路由导航守卫、路由懒加载等高级特性，可以帮助我们更好地管理和组织项目代码。