1.介绍

在vue中，路由是导航切换后无需刷新页面，也是项目必不可少的内容。目前多数都是属于单页面应用，也就是SPA，但在功能写得越多的时候，你就需用到路由来实现页面之前的切换。

vue虽然没自带路由的功能，但官方也是提供了vue-router可以让你实现路由的功能。本文将带领你导入vue-router实现路由功能。

2.安装`vue-router`

2.1前缀条件说明

本文使用是使用vue3作为教学基础
需自行使用vue cli安装好vue3的项目
本文使用到Tailwind CSS提供简单样式效果（选用，缺少代码样式无美化效果），有想可以查看我之前文章，在VUE中使用Tailwind CSS

2.2 安装步骤

通过npm命令添加vue-router到我们的项目中
```
npm  install vue-router
```

在src/views下新增视图home.vue和about.vue文件

<!--src/views/home.vue-->
<template>
<h2 class="ml-10 mt-10">Home Page</h2>
</template>

<script>
export default {
  name: "home"
}
</script>

<style scoped>

</style>

<!--src/views/about.vue-->
<template>
<h2 class="ml-10 mt-10">About Page</h2>

</template>

<script>
export default {
  name: "about"
}
</script>

<style scoped>

</style>

在src/router下新增路由index.js文件，将上面新增的两个视图文件加载进来，并设置到路由配置中，最后创建路由并返回。

// src/router/index.js
import {createRouter, createWebHistory} from "vue-router";
import Home  from "../views/home.vue"
import About from"../views/about.vue"
const routes = [
    {
        path: "/home",
        name: "home",
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: About
    }
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

在src/App.vue中修改内容，加入<router-view/>标签，路由刷新后会展示到该组件中。示例中为了演示加入了导航地址，实际情况可以根据自己项目的导航链接进行跳转。

点击过的导航链接都会加上样式class ="router-link-exact-active router-link-active"，所以可以通过这两个类，进行设定点击的选中效果。

<!--src/App.vue-->
<template>
  <div class=" md:mx-auto relative bg-white overflow-hidden border-b">
    <div class="h-12 md:ml-10 md:pr-4 md:space-x-8 flex justify-left">
      <router-link to="/home" class="font-medium text-gray-500 hover:text-gray-900 flex items-center">Home</router-link>
      <router-link to="/about" class="font-medium text-gray-500 hover:text-gray-900 flex items-center">About</router-link>
    </div>
  </div>
  <router-view/>
</template>
<style scoped>
.router-link-active{
  color: #2440b3;
}
</style>

在src/main.js中让VUE实例加载路由配置，这样vue就拥有了路由功能了

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'
import "./css/tailwindcss.css"
import Router from './router'

createApp(App).use(Router).mount('#app')

配置好以上内容，就可以了，运行npm run dev即可通过地址http://localhost:3000/home预览看到如下效果:

3.总结

通过简单的配置，我们让项目快速的拥有了路由的功能，可以进行页面的切换，切换过程中浏览器的地址会发现变化，且根据router配置文件进行加载.vue视图及组件，渲染的效果将在router-view中进行呈现出来。

VUE如何设置VueRouter路由功能

1.介绍

2.安装vue-router

2.1前缀条件说明

2.2 安装步骤

3.总结

2.安装`vue-router`