路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
通过点击导航，视觉效果上“消失”了的路由组件，默认是被卸载掉的，需要的时候再去挂载。
1. 路由的相关配置
1.1 路由配置
const router = createRouter({
history:createWebHistory(),
routes:[
{
path:'/home',
component:Home
},
{
path:'/about',
component:About
}
]
})
export default router1.2 main.ts配置
import router from './router/index'
app.use(router)
app.mount('#app')1.3 重定向
将特定的路径，重新定向到已有路由。
{
path:'/',
redirect:'/about'
}2. 路由的使用
<template>
<div class="app">
<h2 class="title">Vue路由测试</h2>
<!-- 导航区 -->
<div class="navigate">
<RouterLink to="/home" active-class="active">首页</RouterLink>
<RouterLink to="/news" active-class="active">新闻</RouterLink>
<RouterLink to="/about" active-class="active">关于</RouterLink>
</div>
<!-- 展示区 -->
<div class="main-content">
<RouterView></RouterView>
</div>
</div>
</template>
<script lang="ts" setup name="App">
import {RouterLink,RouterView} from 'vue-router'
</script>3.路由的跳转to的用法
3.1 路由to的两种用法
<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>
<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>3.2 嵌套路由to的两种用法
<!--简化前：需要写完整的路径（to的字符串写法） -->
<router-link to="/news/detail">跳转</router-link>
<!--简化后：直接通过名字跳转（to的对象写法配合name属性） -->
<router-link :to="{name:'guanyu'}">跳转</router-link>4. 路由的工作模式
4.1 history模式
优点：URL更加美观，不带有#，更接近传统的网站URL，使用广泛。
缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。
const router = createRouter({
history:createWebHistory(), //history模式
/******/
})4.2 hash模式
优点：兼容性更好，因为不需要服务器端处理路径。
缺点：URL带有#不太美观，且在SEO优化方面相对较差。
const router = createRouter({
history:createWebHashHistory(), //hash模式
/******/
})5. 路由传参
5.1 query参数
（1）传递参数
<!-- 跳转并携带query参数（to的字符串写法） -->
<router-link to="/news/detail?a=1&b=2&content=欢迎你">
跳转
</router-link>
<!-- 跳转并携带query参数（to的对象写法） -->
<RouterLink
:to="{
//name:'xiang', //用name也可以跳转
path:'/news/detail',
query:{
id:news.id,
title:news.title,
content:news.content
}
}"
>
{{news.title}}
</RouterLink>（2）接收参数
import {useRoute} from 'vue-router'
const route = useRoute()
// 打印query参数
console.log(route.query)5.2 params参数
（1）传递参数
<!-- 跳转并携带params参数（to的字符串写法） -->
<RouterLink :to="`/news/detail/001/新闻001/内容001`">{{news.title}}</RouterLink>
<!-- 跳转并携带params参数（to的对象写法） -->
<RouterLink
:to="{
name:'xiang', //用name跳转
params:{
id:news.id,
title:news.title,
content:news.title
}
}"
>
{{news.title}}
</RouterLink>（2）接收参数
import {useRoute} from 'vue-router'
const route = useRoute()
// 打印params参数
console.log(route.params)注意：
传递params参数时，若使用to的对象写法，必须使用name配置项，不能用path。
传递params参数时，需要提前在规则中占位。
6. 路由的props配置
作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）
{
name:'xiang',
path:'detail/:id/:title/:content',
component:Detail,
// props的对象写法，作用：把对象中的每一组key-value作为props传给Detail组件
// props:{a:1,b:2,c:3},
// props的布尔值写法，作用：把收到了每一组params参数，作为props传给Detail组件
// props:true
// props的函数写法，作用：把返回的对象中每一组key-value作为props传给Detail组件
props(route){
return route.query
}
}7. 浏览记录
7.1 作用
控制路由跳转时操作浏览器历史记录的模式，浏览器的历史记录有两种写入方式，分别为push和replace。
push是追加历史记录（默认值）。
replace是替换当前记录。
7.2 开启replace模式
<RouterLink replace .......>News</RouterLink>8. 编程式导航
路由组件的两个重要的属性：$route和$router变成了两个hooks
import {useRoute,useRouter} from 'vue-router'
const route = useRoute()
const router = useRouter()
console.log(route.query)
console.log(route.parmas)
console.log(router.push)
console.log(router.replace)