记忆点-vue-router

作者: 未路过 | 来源:发表于2022-10-05 14:59 被阅读0次

记忆点-vue-router
Vue添加锚点（兼容直接输入地址时scrollBehavior不
vue中使用锚点
Vue2.0学习笔记（二）--路由与页面间导航
2-9 vue-router
手写 Vue Router、手写响应式实现、虚拟 DOM 和 D
什么是vue router
vue--安装插件，写路由
2019-07-05Vue之Webpack中使用router
Vue 技术栈学习步骤

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