最新版本Vue3的学习笔记-第一章
最新版本Vue3的学习笔记-第二章
最新版本Vue3的学习笔记-第三章(上部)
最新版本Vue3的学习笔记-第三章（下部）
最新版本Vue3的学习笔记-第四章
4. 路由
4.1. 【对路由的理解】
4.2. 【基本切换效果】
Vue3中要使用vue-router的最新版本，目前是4版本。路由配置文件代码如下：
import {createRouter,createWebHistory} from 'vue-router'import Home from '@/pages/Home.vue'import News from '@/pages/News.vue'import About from '@/pages/About.vue'const router = createRouter({history:createWebHistory(),routes:[{path:'/home',component:Home},{path:'/about',component:About}]})export default router
main.ts代码如下：import router from './router/index'app.use(router)app.mount('#app')
App.vue代码如下Vue路由测试
首页新闻关于import {RouterLink,RouterView} from 'vue-router'
4.3. 【两个注意点】
路由组件通常存放在
pages或views文件夹，一般组件通常存放在components文件夹。通过点击导航，视觉效果上“消失” 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。
4.4.【路由器工作模式】
history模式优点：
URL更加美观，不带有#，更接近传统的网站URL。缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有
404错误。const router = createRouter({history:createWebHistory(), //history模式/******/})hash模式优点：兼容性更好，因为不需要服务器端处理路径。
缺点：
URL带有#不太美观，且在SEO优化方面相对较差。const router = createRouter({history:createWebHashHistory(), //hash模式/******/})
4.5. 【to的两种写法】
主页Home4.6. 【命名路由】
作用：可以简化路由跳转及传参（后面就讲）。
给路由规则命名：
routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,},{name:'guanyu',path:'/about',component:About}]跳转路由：
跳转跳转4.7. 【嵌套路由】
编写
News的子路由：Detail.vue配置路由规则，使用
children配置项：const router = createRouter({history:createWebHistory(),routes:[{name:'zhuye',path:'/home',component:Home},{name:'xinwen',path:'/news',component:News,children:[{name:'xiang',path:'detail',component:Detail}]},{name:'guanyu',path:'/about',component:About}]})export default router跳转路由（记得要加完整路径）：
xxxxxxxx记得去
Home组件中预留一个
4.8. 【路由传参】
query参数
传递参数
跳转{{news.title}}接收参数：
import {useRoute} from 'vue-router'const route = useRoute()// 打印query参数console.log(route.query)
params参数
传递参数
{{news.title}}{{news.title}}接收参数：
import {useRoute} from 'vue-router'const route = useRoute()// 打印params参数console.log(route.params)
备注1：传递
params参数时，若使用to的对象写法，必须使用name配置项，不能用path。备注2：传递
params参数时，需要提前在规则中占位。
4.9. 【路由的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}}4.10. 【 replace属性】
作用：控制路由跳转时操作浏览器历史记录的模式。
浏览器的历史记录有两种写入方式：分别为
push和replace：push是追加历史记录（默认值）。replace是替换当前记录。
开启
replace模式：News
4.11. 【编程式导航】
路由组件的两个重要的属性：$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)4.12. 【重定向】
作用：将特定的路径，重新定向到已有路由。
具体编码：
{path:'/',redirect:'/about'}
