Vue3|Router封装使用

创建router文件夹，内部创建index.js文件

main.js内

import router from "./router/index.js";
app.use(router);

index.js内部

一：基础配置····················
import { createRouter, createWebHistory } from "vue-router";
const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
          path: "/",
          //路由重定向
          redirect: "/home",
        },
        {
            path: "/home",
            name: "home",
            //路由懒加载
            component: () => import("../components/Home.vue"),
            //自定义路由字段
            meta:{
                name:"why",
                age:18,
            },
            //添加二级路由，子路由
            children:[
                {
                    path: "/about",
                    component: () => import("../components/About.vue"),
                },
            ]
        },
        {
          //路由后面可继续传参
          path: "/about/:id",
          name: "about",
          component: () => import("../components/About.vue"),
        },
        //输入没有配置的地址跳到错误提示/404页面
        //:pathMatch(.*)*返回输入地址的数组形式
        {
          path: "/:pathMatch(.*)",
          component: () => import("./components/404.vue"),
        },
    ],
});

//二：动态路由····················
//开发时从后台获取角色
const admin = true;
if (admin) {
    // 动态添加一级路由
    router.addRoute({
        path: "/admin",
        component: () => import("../components/Admin.vue"),
    });
    // 动态添加二级路由,home为一级路由name
    router.addRoute("home", {
        path: "vip",
        component: () => import("../components/Vip.vue"),
    });
}
//删除路由,home为路由name
router.removeRoute('home')
//获取所有路由
router.getRoutes()

//三：路由导航守卫····················
router.beforeEach((to, from) => {
    // 在没有token的时候跳转到需要登陆才能访问的页面，自动跳转到登录页面
    //token在用户登录时后端返回，需要保存到本地  localStorage.setItem('token',123)
    const token = localStorage.getItem("token");
    if (!token && to.path === "/order") {
        return "/login";
    }
});

export default router;

页面拿到路由属性

import { useRoute } from "vue-router";
const route = useRoute()
console.log(route.params.id);
//直接在template模板中使用
{{$route.params/query}}

编程式导航跳转

import { useRouter } from "vue-router";
const router = useRouter();
function toHomePage(){
    //方式一
    router.push("/home")
    //方式二,传参
    router.push({
        path:"/home",
        query:{
            name:"why",
            age:18
        }
    })
    //返回
    router.back()
    //向前/向后
    router.go(1/-1)
}