目录

• • • 基础使用
    • • 标准通用模板
      • 脚本式导航
      • 历史记录
      • 路由传参
      • 嵌套路由
      • 组件命名
      • 路由别名
      • 前置路由守卫
      • 后置路由守卫
      • 路由元信息
    • 进阶操作
    • • 路由原理快速复习

基础使用

标准通用模板

src/router/index.ts
先从 vuerouter 中导入三大件；
设置对应 component 的路由地址；
export 整个路由模块，createRouter 里面分别要写路由模式和路由信息；

请避免 router routes route 这些元素的混淆，他们各自代表不同的意思

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";const routes: Array = [{path: "/",component: () => import("../components/xxx.vue"),},
];export const router = createRouter({history: createWebHistory(),routes,
});

注册 router

针对 vue3，请使用 use 进行挂载

...
import { router } from "./router/index.js";const app = createApp(App);
app.use(router);
app.mount("#app");

App.vue

1. router-link 配合 router-view 使用，故一个 template 里面可以有多个 router-link，但只能有一个 router-view
2. router-link 和面的 to 表示需要连接到那个路由页面，路径就写我们在 path 里面定义的路径
3. 每次让 router-link 指定一个路径后，指定路径的页面就会显示到 router-view 插入的地方！！！

脚本式导航

导入模块 useRouter 后，通过使用 push 方法来跳转到对应的路由页面，而不是用 router-link 标签！！！
下面展示了通过路由的 name 来跳转，当然也可以通过 path 来跳转

历史记录

router-link 标签添加 replace 属性，即可不记录跳转历史

login

脚本跳转模式，把 push 替换成 replace 也可以达到不记录跳转历史的效果！

const toPage = (url: string) => {router.replace({name: url, // 根据路由名称打开对应页面});
};

使用 go()或者 back()来向前或者向后跳转一个网页

const toPage = (url: string) => {router.go(1); // 网页前进一步router.back(1); // 网页后退一步
};

路由传参

query 传参
上层代码为发送参数的组件，下层代码为接收参数的组件；

• 传参的方式就是在 Push 中写入一个属性 query，之后 query 接受一个对象，该对象内写入你需要传递过去的属性；
• query 传参法可以使用 path 或者 name 来指定路由页面
• 接收组件需要导入 useRoute 并实例化它来接收参数
• 接收参数格式为{ {route.query.xxx} }

params 传参
和query传参类似，但是他传入的参数是放在请求文件里面的，所以不会明明白白的显示在地址栏里面；
在 push 中必须且只能使用 name 来配合 params 使用，不可以使用 path 指定路由页面；
接收者组件只需要按照以下格式获取即可：{{route.params.xxx}}

嵌套路由

需要定义定义路由中的 route；
添加 children 属性，然后可以无限嵌套下去，但要注意最终 path 是拼接而来的，即一层层向上链接！！

const routes: Array = [{path: "/",component: () => import("../components/footer.vue"),children: [{path: "",component: () => import("../components/login.vue"),},{path: "reg",component: () => import("../components/reg.vue"),},],},
];

组件命名

当一个 component 具有多个成员时，可以对 route-view 添加属性 name，来指定需要显示那个成员！

// 父组件定义导向的
const routes:Array = [{path:'/',component:{login:import('../components/login.vue'),reg:import('../components/reg.vue')}}
]// 接收者使用name来指定接收哪一个component

路由别名

在 routes 中加入参数 alias 即可指定别名；
别名的作用：当使用 path 调用路由页面时，也可以直接使用别名代替；

const routes: Array = [{path: "/",alias: ["/a", "/b"],component: {login: import("../components/login.vue"),reg: import("../components/reg.vue"),},},
];

前置路由守卫

定义：路由守卫可以看做是一个筛选器，即根据访问者具有的权限来将其导航向不同的地址；
例如某访问者想访问后台，但很明显其权限不够，路由守卫立刻阻挡并驳回请求（或者将其导向另一个网址）；

以下是前置路由守卫的主要格式：

• 单独使用 next()表示允许允许访问通过
• next(‘/’)表示指向该访问到一个新的地址’/’
• 配合 if…else…对用户的权限进行判断，来指向性导航到某个网址

const whiteList = ["/"];router.beforeEach((to, from, next) => {if (whiteList.includes("xxx")) {next();} else {next("/");}
});

后置路由守卫

使用方式和前置路由守卫差不多，只是方法名变了一下而已，他表示在路由 next()完成后执行的响应

路由元信息

即路由自带的一个数据包，里面可以存储变量等内容；
使用 meta 定义，对象的形式！

export const router = createRouter({history: createWebHistory(),routes: [{path: "/",component: () => import("view/login.vue"),meta: {title: "这是一个标题",},},],
});

进阶操作

路由原理快速复习

重点重点重点！！！建议直接看完然后上手项目开发，不然会困惑很久（特别是对于我这种笨蛋来说）

众所周知，我们使用路由跳转必须要存在一个标签：

一般的，我们会直接令 App.vue 的 template 标签内只保留一个该标签；
此时我们无论在任何子组件中使用 push 或者 replace 切换路由，结果都会显示在 App.vue 的 router-view 标签内部（其实此刻就相当于全屏渲染新页面了，效果看起来和直接使用 a 标签进行页面跳转完全一致）；

这样做我们完全不用在意什么父子组件传参！