Vue3+router路由重定向-别名

最新推荐文章于 2024-03-26 14:07:27 发布

是小张呀！

最新推荐文章于 2024-03-26 14:07:27 发布

阅读量997

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_52099965/article/details/127475917

版权

重定向 redirect 别名 alias

//引入路由对象
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";

//路由数组的类型 RouteRecordRaw
const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Login",
    component: () => import("../components/login.vue"),
    /* redirect: '/home', //路由重定向第一种书写方式 */
    /*  redirect: {
      path: '/home'
    }, //路由重定向第二种书写方式 */
    redirect: (to) => {
      return {
        path: "/home",
        query: {
          name: "zs",
        },
      };
    },//路由重定向第三种书写方式 
    alias: ['/login', '/login1'], //别名 alias 可以起多个名字
    children: [
      {
        path: "/home", // 默认展示
        name: "Home",
        component: () => import("../components/home.vue"),
      },
      {
        path: "/hello",
        name: "Hello",
        component: () => import("../components/HelloWorld.vue"),
      },
    ],
  },
];

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

export default router;