聊聊关于Vue3中路由 路由配置方式

Vue3中路由的配置方式

在Vue3中，路由配置是通过vue-router进行的。vue-router是Vue.js的官方路由管理器，可以通过vue-cli创建项目时选择是否安装。

下面是Vue3中路由的一个简单配置示例，包含了三个组件的路由配置：Home、About、和Contact。路由使用了history模式，定义了默认的路由和404页面：

import { createRouter, createWebHistory } from "vue-router";
import Home from "@/views/Home.vue";
import About from "@/views/About.vue";
import Contact from "@/views/Contact.vue";
import NotFound from "@/views/NotFound.vue";

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/about",
    name: "About",
    component: About,
  },
  {
    path: "/contact",
    name: "Contact",
    component: Contact,
  },
  {
    path: "/:catchAll(.*)",
    name: "NotFound",
    component: NotFound,
  },
];

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

export default router;

Vue3中路由参数的传递

在Vue3中，路由传参的方式有很多种。路由参数是一种传递数据的方式，它通常用于将一些必要的数据传递给组件，在组件内进行处理渲染。

下面是Vue3中路由传参的一个简单示例，使用了动态路由方式，将参数id传递给组件：

const routes = [
  {
    path: "/users/:id",
    name: "User",
    component: User,
  },
];

// 组件中获取参数
import { useRouter } from "vue-router";

export default {
  setup() {
    const route = useRouter();
    const id = route.params.id;
    return { id };
  },
};

Vue3中路由的导航守卫

路由导航守卫是在路由跳转时的一些钩子函数，它可以在跳转前、跳转后、或者跳转中拦截和处理一些事件。Vue3中路由导航守卫有三种：全局守卫、路由独享守卫和组件内守卫。

下面是Vue3中使用全局守卫的一个简单示例，分别定义了beforeEach和afterEach的守卫：

import { createRouter, createWebHistory } from "vue-router";

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

// 全局前置守卫
router.beforeEach((to, from, next) => {
  // 在跳转前做些什么...
  console.log(`beforeEach:${to.path}`);
  next();
});

// 全局后置钩子
router.afterEach((to, from) => {
  // 在跳转后做些什么...
  console.log(`afterEach:${to.path}`);
});

export default router;

Vue3中路由懒加载

路由懒加载是Vue3中提高性能的一种方式，它可以将路由需要的组件按需加载，减少了初始加载的时间。在Vue3中，路由懒加载可以通过webpack的code-splitting实现。

下面是Vue3中使用路由懒加载的一个简单示例，使用了webpack的import函数动态加载组件：

const routes = [
  {
    path: "/home",
    name: "Home",
    component: () => import("../views/Home.vue"),
  },
];

// 组件中使用懒加载
import { defineAsyncComponent } from "vue";

export default {
  components: {
    AppHeader: defineAsyncComponent(() => import("./AppHeader.vue")),
  },
};