Vue3快速上手（路由）

目录一、路由1.基本切换效果2.两个注意点3.路由器工作模式history 模式hash 模式4.to的两种写法5.命名路由6.嵌套路由7.路由传参query参数params参数8.路由的props配置9.replace属性10.编程式导航11.重定向一、路由1.基本切换效果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 routermain.ts 代码如下import router from ./router/index app.use(router) app.mount(#app)App.vue 代码如下template div classapp h2 classtitleVue路由测试/h2 !-- 导航区 -- div classnavigate RouterLink to/home active-classactive首页/RouterLink RouterLink to/news active-classactive新闻/RouterLink RouterLink to/about active-classactive关于/RouterLink /div !-- 展示区 -- div classmain-content RouterView/RouterView /div /div /template script langts setup nameApp import {RouterLink,RouterView} from vue-router /script2.两个注意点路由组件通常存放在 pages 或 views 文件夹一般组件通常存放在 components 文件夹。通过点击导航视觉效果上“消失” 了的路由组件默认是被卸载掉的需要的时候再去挂载。3.路由器工作模式history 模式优点 URL 更加美观不带有 # 更接近传统的网站 URL 。缺点后期项目上线需要服务端配合处理路径问题否则刷新会有 404 错误。const router createRouter({ history:createWebHistory(), //history模式 /******/ })hash 模式优点兼容性更好因为不需要服务器端处理路径。缺点 URL 带有 # 不太美观且在 SEO 优化方面相对较差。const router createRouter({ history:createWebHashHistory(), //hash模式 /******/ })4.to的两种写法!-- 第一种to的字符串写法 -- router-link active-classactive to/home主页/router-link !-- 第二种to的对象写法 -- router-link active-classactive :to{path:/home}Home/router-link5.命名路由作用可以简化路由跳转及传参后面就讲。给路由规则命名routes:[ { name:zhuye, path:/home, component:Home }, { name:xinwen, path:/news, component:News, }, { name:guanyu, path:/about, component:About } ]跳转路由!--简化前需要写完整的路径to的字符串写法 -- router-link to/news/detail跳转/router-link !--简化后直接通过名字跳转to的对象写法配合name属性 -- router-link :to{name:guanyu}跳转/router-link6.嵌套路由1.编写 News 的子路由 Detail.vue2.配置路由规则使用 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 router3.跳转路由记得要加完整路径router-link to/news/detailxxxx/router-link !-- 或 -- router-link :to{path:/news/detail}xxxx/router-link4.记得去 Home 组件中预留一个 router-viewtemplate div classnews nav classnews-list RouterLink v-fornews in newsList :keynews.id :to {path:/news/detail} {{news.name}} /RouterLink /nav div classnews-detail RouterView/ /div /div /template7.路由传参query参数1.传递参数!-- 跳转并携带query参数to的字符串写法 -- router-link to/news/detail?a1b2content欢迎你 跳转 /router-link !-- 跳转并携带query参数to的对象写法 -- RouterLink :to{ //name:xiang, //用name也可以跳转 path:/news/detail, query:{ id:news.id, title:news.title, content:news.content } } {{news.title}} /RouterLink2.接收参数import {useRoute} from vue-router const route useRoute() // 打印query参数 console.log(route.query)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}} /RouterLink2.接收参数import {useRoute} from vue-routerconst route useRoute()// 打印params参数console.log(route.params)备注1传递 params 参数时若使用 to 的对象写法必须使用 name 配置项不能用 path 。备注2传递 params 参数时需要提前在规则中占位。8.路由的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 } }9.replace属性1.作用控制路由跳转时操作浏览器历史记录的模式。2. 浏览器的历史记录有两种写入方式分别为 push 和 replace push 是追加历史记录默认值。replace 是替换当前记录。3. 开启 replace 模式RouterLink replace .......News/RouterLink10.编程式导航路由组件的两个重要的属性 $route 和 $router 变成了两个 hooksimport {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)11.重定向1.作用将特定的路径重新定向到已有路由。2. 具体编码{ path:/, redirect:/about }