1. 环境搭建——脚手架
npm init vue@latest => 选择添pinia和router => 进入项目文件夹 => npm i => npm run dev
2. 注册路由
router/index.js中的routes下写路由，例如：其中views文件夹中放路由对应页面的文件
{
// 路由名
path: "/playLists",
// 懒加载组件
component: () => import("../views/playLists/index.vue"),
},3. 页面跳转
3.1 声明式导航跳转标签
使用：<router-link to="/car">购物车</router-link>
与a标签区别：a标签会重新请求网络（浏览器功能）；router-link标签只是跳转，不会发起网络请求（底层是a标签，但阻止了a标签的默认事件），使用a标签名来设置css样式
当需要访问其他网站时，用a标签；如果访问的还是当前服务器上的页面，就用router-link标签
3.2 编程式导航跳转
主页面引入：import { useRouter } from 'vue-router' 使用：router.push('/路由');
跳转页面引入：import { useRoute } from 'vue-router'
3.3 跳转页面时传参
a. query传参 => router.push({ name: 路由名/ path:路由名 , query: { 传的参数 } }) 或 通过？拼接来传参 router.push('/路由名?key=value'); //
目标页获取 => useRoute().query.参数的属性名
b. 动态路由传参 => router.push({ name: 'login', params: { 传的参数 } });
注：注册路由：path:'/网址:变量名' 必须注册路由的name
目标页面获取参数 => useRoute().params.参数的属性名
注：vue框架中，两种传参方式都可以在网址中看见
4. 路由嵌套——子路由
实现切换效果（CSS、v-if/v-for、动态组件component、子路由）
写在父路由里面，作为children属性的值，例如：
{
path: "/shopdetail",
// 路由名
name: "shopdetail",
component: () => import("../views/shopdetail/index.vue"),
children: [
{
path: "/shopdetail/shop1",
name: "shop1",
component: () => import("../views/shopdetail/views/shop1.vue"),
},
{
path: "/shopdetail/shop2",
name: "shop2",
component: () => import("../views/shopdetail/views/shop2.vue"),
},
],
},5. 重定向——redirect
当用户输入某个路由时，重新更改路由地址.。例如：
// 重定向 用户输入/shopdetail时，将路由改成/shopdetail/shop1
redirect: "/shopdetail/shop1",6. 路由守卫（健全）
6.1 前置路由守卫
router.beforeEach((to,from,next)=>{ })
to：要去哪个页面
from：从哪个页面来
next：让不让去
6.2 后置路由守卫——已匹配到路由
router.afterEach((to, from) => { })
函数内部可以操作浏览器的API，例如：上一个组件已将浏览器滚动条滑到下面，切换组件后应该将浏览器body标签滚动条滚到最上方。
6.3 独享守卫
beforeEnter: (to, from, next) => { }文章来源：https://www.toymoban.com/news/detail-491998.html
只守卫一个网址 beforeEnter，写在路由内部，用法和beforeEach一样文章来源地址https://www.toymoban.com/news/detail-491998.html
到了这里，关于Vue框架中的路由的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
