Vue Router 深入理解与实践-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_65661084/article/details/125535969

路由的历史

后端路由阶段：

用户输入url，后端接收url,生成页面page，返回给用户。

url - >page 路径和页面一一匹配的路由映射关系，是由后端维护的

前后端分离阶段：

后端只返回数据由前端渲染这些数据

SPA（单页面应用）：

在前端可以根据路径的改变，显示对应的内容，路由映射关系由前端维护，所以也叫前端路由

Vue-router

Vue-router处理路径和组件的映射关系

使用vue-router的步骤:
第一步：创建路由组件的组件；

第二步：配置路由映射: 组件和路径映射关系的routes数组；

const routes = [
    { path: "/", component: Home },
    { path: "/home", component: Home },
    { path: "/about", component: About }
]

第三步：通过createRouter创建路由对象，并且传入routes和history模式；

const router = createRouter({
    routes: routes,
    history: createWebHashHistory()
})

第四步：使用路由: 通过和router-link 和 router-view

路由懒加载

所有的页面都会打包到app.js，

懒加载：用到再加载

home组件是一个单独的js，第三方库是一个单独的js

 { path: "/home", component: () => import(/*webpackChunkName:'home-chunk'*/"../pages/Home.vue")
    },
    { path: "/about", component: () => import(/*webpackChunkName:'about-chunk'*/"../pages/About.vue") }

动态路由的基本匹配

在index.js中

{ path: "/user/:userName", component: () => import("../pages/User.vue") }

在App.vue中

    <router-link to="/user/why">用户</router-link>

在User组件中

<template>
  <div>User:{{ $route.params.userName }}</div>
</template>

<script>
import {useRoute} from "vue-router"

export default {
  created() {
    console.log(this.$route.params.userName);
  },
  setup() {
    //在setup中使用route对象要调用useRoute方法
    const route = useRoute();
    console.log(route.params.userName);
  },
};
</script>

路由的嵌套

应用场景：

我们Home页面本身，也可能会在多个组件之间来回切换：

比如Home中包括Product、Message，它们可以在Home内部来回切换

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Bw2lxvGS-1656556864410)(E:\工作\产品经理\Vue3\class_image\路由嵌套.png)]

router-link的v-slot

可以拿到解析后的路径、触发导航的函数等

  <!--props.href 拿到对应的路径 
        props.navigate 导航函数 配合custom使用
        props.isActive 是否为活跃状态
         props.isExactActive 是否为精确的活跃状态-->
    <router-link to="/home" v-slot="props">
      <strong @click="props.navigate">{{ props.href }}</strong>
      <!-- <strong>{{ props.route }}</strong> -->
      <MySlot title="我是标题" @click="props.navigate" />
      <h2>{{ props.isActive }}</h2>
      <h2>{{ props.isExactActive }}</h2>
    </router-link>

router-view的v-slot

可以和动态组件一起使用实现切换组件的动画和keepalive一起使用可以保存状态

动态添加路由

添加顶层路由

const routes = []//一开始是空的
const router = createRouter({routes})

//根据角色动态添加路由
if(管理员){router.addRoute(path:'/order',component:() =>{import(order组件所在的路径)})}

添加二级路由

路径不加 /

router.addRoute("home", {

    path: "moment", component: () => import("../pages/Moment.vue")

})

路由导航守卫

应用场景：用户未登录，点了用户，不能进入到用户页面，而跳到登录页面

// to 跳转到的路由对象
// from 从哪个路由对象跳转过来的
// 返回值
// 1 false拦截 不显示东西
// 2 undefined默认导航
// 3 字符串：路径 导航到对应的路径
router.beforeEach((to, from) => {
    console.log(`第${++count}次跳转`)
    if (to.path !== "/login") {
        const token = window.localStorage.getItem("token")
        if (!token) {
            return "/login"
        }
    }
})

在login.vue中

import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const loginUp = () => {
      window.localStorage.setItem("token", "why");

      router.push({
        path: "/home",
      });
    };
    return {
      loginUp,
    };
  },
};