1.打包的时候命名
{
path: "/main",
component: () =>
import(/* webpackChunkName: "main-chunk" */ "../components/main.vue"),
},
2.动态路由匹配
{
path: "/main/:id",
component: () => import("../components/main.vue"),
},
html
<router-link to="/main/123">to main</router-link>
<router-link to="/login">to login</router-link>
<router-view></router-view>
这个时候，点击了to main,就可以通过
1.{{ $route.params.XXX}}
- this.$route.params.XXX
-
const route = useRoute();
console.log(route.params.id);
来获取id的值了。
匹配多个参数的话
route.path()可以得到当前的路由
image.png
3.nof-found路由设置
{
path: "/:pathMatch(.*)",
component: () => import("../components/not-found.vue"),
},
not-found.vue
<template>
<div>not-found</div>
{{ $route.params }}
</template>
image.png
{
path: "/:pathMatch(.*)*",
component: () => import("../components/not-found.vue"),
},
image.png
$route.params.pathMatch获取到传入的参数：
在/:pathMatch(.*)后面又加了一个 *；
带星的化，就会把/一个一个解析，把内容放到数组里面
4. 路由的嵌套配置
一级路由，二级路由
{ path: "/", redirect: "/main/product" },
{
path: "/main",
component: () => import("../components/main.vue"),
children: [
{
path: "/main/message",
component: () => import("../components/cpns/message.vue"),
},
{
path: "/main/product",
component: () => import("../components/cpns/product.vue"),
},
],
},
子路由里面
path写 path: "/main/message",可以
写path:"message"也可以（不要加/）
5. 代码的页面跳转
image.png
router.push("/main/message");
router.push("/login");
const btnClick = () => {
router.push({
path: "/login",
});
};
6.query方式的参数
image.png
const btnClick = () => {
router.push({
path: "/login",
query: {
name: "why",
age: 18,
},
});
};
点击之后
image.png
7.动态添加路由
const router = useRouter();
/*
const actionsFn = mapActions(["incrementAction", "decrementAction"]);
return {
...actionsFn,
};*/
const categoryRoute = {
path: "/main/category",
component: () => import("./components/category.vue"),
};
router.addRoute("main", categoryRoute);
const btnClick = () => {
router.push("/main/category");
};
return {
btnClick,
};
使用router.addRoute(fathername, newRoute)
如果是根下面的话，不用加fathername，直接添加路由。
但是加某个子路由的话，得添加父亲名字，不然会报错，而且router-view显示的是在faterh的地方。path的地方也可以直接写子组件，不要写 path: "/category"，要么是完整路径，要么是光字符串。
const categoryRoute = {
path: "category",
component: () => import("./components/category.vue"),
};
8.动态路由删除
删除路由有以下三种方式：
方式一：添加一个name相同的路由；
方式二：通过removeRoute方法，传入路由的名称；
方式三：通过addRoute方法的返回值回调；
方式一：
就是通过替换的方式删除掉以前的路由，
etup() {
const router = useRouter();
const categoryRoute = {
path: "category",
name: "category",
component: () => import("./components/category.vue"),
};
router.addRoute("main", categoryRoute);
const btnClick = () => {
console.log(router.getRoutes()); //7条路由
const newRoute = {
path: "other",
name: "category",
component: () => import("./components/other.vue"),
};
router.addRoute("main", newRoute);
console.log(router.getRoutes()); //6条路由
};
return {
btnClick,
};
},
addRoute之前
image.png
addRoute之后
image.png
方式二：removeRoute方法，传入路由的名称；
setup() {
const router = useRouter();
const categoryRoute = {
path: "category",
name: "category",
component: () => import("./components/category.vue"),
};
router.addRoute("main", categoryRoute);
const btnClick = () => {
console.log(router.getRoutes()); //7条路由
router.removeRoute("category");
console.log(router.getRoutes()); //6条路由
};
return {
btnClick,
};
},
方式三：
setup() {
const router = useRouter();
const categoryRoute = {
path: "category",
component: () => import("./components/category.vue"),
};
const removeRoute = router.addRoute("main", categoryRoute);
const btnClick = () => {
console.log(router.getRoutes()); //7条路由
removeRoute();
console.log(router.getRoutes()); //6条路由
};
return {
btnClick,
};
},
总结：
Router常用方法
- addRoute（）
- removeRoute()
3.router.getRoutes()：获取一个包含所有路由记录的数组
4.router.hasRoute()：检查路由是否存在
9.路由导航守卫
vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航.
参数：
to: Route对象, 即将跳转到的Route对象
from: Route对象, 从哪一个路由对象导航过来的
第三个参数是个next函数，但是vue-router4版本以上不推荐使用这个，不用next，因为容易出现多次调用问题
返回值：
- 返回值问题:利用返回值决定要跳转的位置v
- 1.false: 不进行跳转，停留在当前路由
- 2.undefined或者不写返回值: 进行默认导航，改去哪里就去哪里
- 3.字符串: 路径, 跳转到对应的路径中
- 4.对象: 类似于 router.push({path: "/login", query: ....})
return {path: "/login", query: ....}
// 导航守卫beforeEach（全局前置守卫）
let counter = 0;
// to: Route对象, 即将跳转到的Route对象
// from: Route对象, 从哪一个路由对象导航过来的
//第三个参数是个next函数，但是vue-router4版本以上不推荐使用这个，不用next
/**
* 返回值问题:利用返回值决定要跳转的位置v
* 1.false: 不进行跳转，停留在当前路由
* 2.undefined或者不写返回值: 进行默认导航，改去哪里就去哪里
* 3.字符串: 路径, 跳转到对应的路径中
* 4.对象: 类似于 router.push({path: "/login", query: ....})
* return {path: "/login", query: ....}
*/
router.beforeEach((to, from) => {
console.log(`进行了${++counter}路由跳转`);
// if (to.path.indexOf("/home") !== -1) {
// return "/login"
// }
if (to.path !== "/login") {
//只要不是login页面，都需要token
const token = window.localStorage.getItem("token");
if (!token) {
return "/login";
}
}
});
Vue还提供了很多的其他守卫函数，目的都是在某一个时刻给予我们回调，让我们可以更好的控制程序的流程或者功能：
p https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html
image.png
注意：useRoute或者useRouter只能在compositionAPI里面，也就是vue组件里面使用。
其他的js文件想使用的话，直接引入import router from "@/router/index.js"
网友评论