一句话总结：Vue 3路由通过Vue Router 4实现，提供了声明式、组件化的路由配置，用于构建单页面应用（SPA）的页面导航。
路由的创建
安装路由
npm i vue-router
引入createrRouter
import {createRouter} from 'vue-router'
创建路由
const router = createRouter({
history: createWebHistory(),
routes: [{
path: '/home',
component: ()=>import("@/components/Home.vue")
},{
path: '/news',
component: ()=>import("@/components/News.vue")
},{
path: '/about',
component: ()=>import("@/components/About.vue")
},]
})
export default router
调用createRouter创建路由，需要传递一个对象
- history: 路由的工作模式
- routes: 路由
指定路由的组件时，使用()=>import("组件路径")，这样的引入方式可以实现路由懒加载，也就是用户访问哪个路由时才加载。
使用路由
// main.ts
import {createApp} from 'vue'
import App from './App.vue'
import router from '@/router'
const app = createApp(App)
app.use(router)
app.mount('#app')
RouterView和RouterLink
RouterView 会作为占位符，根据当前的路由地址动态地渲染对应的组件
RouterLink 是 Vue Router 提供的组件，用于在 Vue 应用中创建导航链接。它类似于传统的 <a> 标签，使用 RouterLink 组件，可以创建指向不同路由的链接。
<template>
<RouterLink to="/home" active-class="active">首页</RouterLink>
<RouterLink to="/news">新闻</RouterLink>
<RouterLink to="/about">关于</RouterLink>
<div>
<RouterView></RouterView>
</div>
</template>
to标签的两种写法
RouterLink中的to指向一个路由，active-class是激活时的类名
字符串写法
<RouterLink to="/news">新闻</RouterLink>
对象写法
<RouterLink :to="{path: '/home'}">首页</RouterLink>
路由的工作模式
history模式
URL不带#，需要服务的配合处理路径问题，否则刷新会有404错误。
const router = createRouter({
history: createWebHistory(),
})
hash模式
URL带#, 在SEO优化方面相对较差
SEO（Search Engine Optimization）即搜索引擎优化，是一种通过对网站进行内部调整和优化（如网站结构、内容、代码等）以及外部推广（如链接建设、社交媒体营销等），以提高网站在搜索引擎结果页面（SERP）上的排名，从而增加网站流量和曝光度的技术和策略。
const router = createRouter({
history: createWebHashHistory(),
})
嵌套路由
使用children属性，在一个视图（组件）中嵌套另一个视图（组件）在一个视图（组件）中嵌套另一个视图（组件）
const router = createRouter({
history: createWebHistory(),
routes: [{
path: '/news',
component: ()=>import("@/components/News.vue"),
children: [
{
path: 'detail',
component: ()=>import("@/components/Detail.vue")
}
]
}]
})
路由传参
query参数
第一种写法（字符串）
传递query参数，直接在路径后面加?key=value&key=value形式
<RouterLink to="/news/detail?item=5">新闻{{ item }}</RouterLink>
获取query参数
<script lang="ts" setup>
import { toRefs } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
let {query} = toRefs(route);
</script>
- 首先引入vue-router里的useRoute
- 调用useRoute获取到route
- 从route.query里面获取到参数
第二种写法（对象）
<RouterLink
:to="{
path: '/news/detail',
query: {
item,
},
}"
>
新闻{{ item }}
</RouterLink>
params参数
第一种写法（字符串）
直接在url后面用/拼接，但是在router.js里面需要在路径提前占位
// News.vue
<RouterLink to="/news/detail/item/5">
新闻{{ item }}
</RouterLink>
// router/index.ts
{
path: '/news',
component: ()=>import("@/components/News.vue"),
children: [
{
path: 'detail/:item',
component: ()=>import("@/components/Detail.vue")
}
]
}
第二种写法（对象）
params传参的对象形式，只能使用name。
<RouterLink
:to="{
name: 'detail',
params: {
item: 5,
},
}"
>
新闻{{ item }}
</RouterLink>
路由的props属性
作用：让路由组件更方便的收到参数（可以将路由参数作为props传给组件）
第一种写法
添加配置props:true手动开启，这种方式返回params参数。
{
path: '/news',
component: ()=>import("@/components/News.vue"),
children: [
{
name: "detail",
path: 'detail/:item',
component: ()=>import("@/components/Detail.vue"),
props: true
}
]
}
第二种写法
把query参数以props方式返回
{
name: "detail",
path: 'detail',
component: ()=>import("@/components/Detail.vue"),
props(route) {
return route.query
}
}
replace属性
replace方法是vue-router提供的一个方法，用于替换当前的历史记录条目，而不是像push方法那样添加一个新的历史记录条目。
<RouterLink
replace
:to="{
name: 'detail',
query: {
item: 5,
},
}"
>
新闻{{ item }}
</RouterLink>
编程式路由导航
在vue2中是this.$router.push();而在vue3中由于setup中没有this，所以需要引入vue-router里的useRouter钩子函数，创建一个路由。
<script lang="ts" setup>
import {useRouter} from 'vue-router'
const router = useRouter()
router.push("/news")
</script>
和router-link一样，可以写字符串，也可以写对象
<script lang="ts" setup>
import {useRouter} from 'vue-router'
const router = useRouter()
router.push({
name: 'detail',
query: {
item: 5,
},
})
</script>
路由重定向
routes: [{
path: '/',
redirect: "/home"
}]
