安装
使用脚手架安装
在使用Vue脚手架创建项目时，在项目选项中选择使用vur-router，项目创建后安装项目依赖的时候会自安装。
手动安装
在项目目录中使用终端命令npm install vue-router，即可安装。
开始使用
1、使用路由前的一些准备
我们知道一般要使用路由功能肯定是有不同的页面跳转需求，不然如果就只有一个界面那自然是没必要使用路由功能的，所以在使用前我们得都确立有哪些页面、并创建好这些页面的组件。
我们创建一个views目录用来存放页面组件，然后分别创建首页(Index.vue)、列表页(List.vue)、内容页组件(Content.vue)。
2、创建路由实例
创建一个目录routes来用来存储路由相关的操作的文件，在其下新建一个index.js文件用来创建路由的实例并导出。
使用createRouter方法创建路由实例，一个路由实例必须包含路由与组件的映射表和路由模式。
创建实例的代码如下：
import { createRouter, createWebHashHistory } from "vue-router";
// 导入页面组件
import Home from "@/views/Index.vue";
import List from "@/views/List.vue";
import Content from "@/views/Content.vue";
// 创建路由映射关系表
const routes = [
{ name: "home", path: "/", component: Home },
{ name: "list", path: "/list", component: List },
{ name: "content", path: "/content", component: Content }
];
// 创建路由实例
const router = createRouter({
history: createWebHashHistory(), // 使用hash路由模式
routes
});
export default router;
3、注册路由插件
在main.js中引入router/index.js中导出的路由实例，然后使用use方法注册路由插件，如下：
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'; // 引入路由实例
const app = createApp(App);
app.use(router) // 在项目中注册路由
app.mount('#app');
4、在组件中使用路由功能
路由注册完毕后，就可以开始使用路由了，使用RouterLink 组件可在页面中跳转已注册的任意的组件，使用RouterView来表示路由组件渲染的具体位置，在app.vue中我做如下设置：
<template>
<nav>
<RouterLink to="/">首页</RouterLink>
<RouterLink to="/list">列表页</RouterLink>
<RouterLink to="/content">内容页</RouterLink>
</nav>
<main>
<!-- 使用RouterView告诉Vue在此处渲染路由组件 -->
<RouterView></RouterView>
</main>
</template>
<script setup>
import { RouterLink } from 'vue-router';
</script>
<style scoped>
.container {
width: 600px;
}
</style>
以上就完成了一个路由最简单的使用过程。
路由模式
在上面创建路由实例的过程中使用了createWebHashHistory这个方法，这个就是创建hash路由模式，同样Vue-Router也支持其它的路由模式：
- Hash 模式
使用createWebHashHistory()方法创建，hash路由模式前面已经介绍过。
- Memory 模式
使用createMemoryHistory()方法创建，创建一个基于内存的历史，Memory 模式不会假定自己处于浏览器环境，一般用在服务端渲染模式中，但你仍可以在浏览器应用程序中使用此模式，但请注意它不会有历史记录，这意味着你无法后退或前进。
- HTML5 模式
使用createWebHistory()方法创建，就是上一章说过的使用浏览器history记录来实现的。
路由导航
1、使用RouterLink导航
RouterLink用来渲染一个链接的组件，该链接在被点击时会触发导航，其实在渲染之后就是一个a标签。
- to属性
设置目标路由，也就是需要跳转的路由的地址，可以是一个字符串，如：<RouterLink to="/list">列表页</RouterLink>，也可以是一个对象，如：<RouterLink :to=" { path: "/list" } ">首页</RouterLink>
- replace属性
replace属性为true时，代表这个链接跳转不会被记录到历史记录中，也就是这个跳转操作，点击浏览器后退按钮无法退回。
- tag属性
tag属性表示将使用什么标签去渲染，默认是a标签，如这个值为li则代表使用li标签渲染。
- active-class属性
表示当前链接被激活后的css样式。
还有更多可以去Vue-Router官网中查看。
2、编程式导航
RouterLink是在生成模板中跳转链接的方式，同时Vue-Router也有在JS代码中的路由跳转方式。
<template>
<ul>
<li @click="handleToPath('/')">首页</li> <!-- 使用一个路径字符 -->
<li @click="handleToPath({path: '/list'})">列表页</li> <!-- 使用路径对象 -->
<li @click="handleToPath('/content')">内容页</li>
</ul>
<main>
<!-- 使用RouterView告诉Vue在此处渲染路由组件 -->
<RouterView></RouterView>
</main>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const handleToPath = path => router.push(path);
</script>
<style scoped>
li {
display: inline;
margin: 0 10px;
cursor: pointer;
}
</style>
如以上先使用useRouter获取当前路由实例，然后操作路由实例的push、replace、go等方法便可以操作路由了。
- push方法
push方法可跳转到对应的路由界面，并且记录此次跳转的历史记录，同样push方法的参数可以使用一个字符或对象都可。
const router = useRouter();
router.push("/list"); // 使用路径字符
router.push({ path: '/list' }); 使用对象
在使用对象进行路由跳转的时候同样也可以向跳转的路由传递参数，如：
// 命名的路由（名字需与路由映射表对应）并加上参数，让路由建立 url
router.push({ name: 'user', params: { username: 'eduardo' } })
// 带查询参数，结果是 /register?plan=private
router.push({ path: '/register', query: { plan: 'private' } })
// 带 hash，结果是 /about#team
router.push({ path: '/about', hash: '#team' })
- replace
replace方法同样也是跳转到对应路由界面，但是不创建新的路由历史记录，无法使用后退功能回到此界面，使用方式和push方法一样。
- go
go方法是用来横跨历史记录的，可以跨跃式切换路由界面。
// 向前移动一条记录，router.forward() 同样具有相同功能
router.go(1)
// 后退一条记录，router.back() 同样具有相同功能
router.go(-1)
// 前进 3 条记录
router.go(3)
以上就是本章的内容了，下一章将继续介绍路由的其它操作，如：传参、动态路由、懒加载等、路由元信息等
