vue3中使用路由_vue3 路由

路由官方官网

1. https://router.vuejs.org/zh/

项目中使用路由

1.安装路由
cnpm i --save-dev vue-router
"vue-router": "^4.1.6",

2.项目中配置路由
import vueRouter from "vue-router";
//vue2 写法是上面这种 vue3 路由改为单暴漏
import { createRouter } from "vue-router";
console.log(createRouter);

3.在main.js中创建路由 使用常用的api
//配置项目路由
import { createRouter, createWebHistory } from "vue-router";
//创建路由实例
const router = createRouter({
history: createWebHistory(), //mode:"history" vue3 路由模式 history: createWebHistory()
routes: [], //路由配置项
//配置滚动行为
scrollBehavior(to, from, savePosiation) {
//回到之前路由组件的滚动位置
if (savePosiation) {
return savePosiation;
}
return { left: 0, top: 0 }; //vue3 返回值存在变化
},
});
//将路由关联到vue3 项目
createApp(App).use(router).mount("#app");
 
 
//vue项目路由可以配置公共路径
vue2 baseUrl:"/admin"
vue3 history: createWebHistory("/admin"),

浏览器效果

配置一级路由，使用routerView 做路由出口

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import "element-plus/theme-chalk/index.css";
//配置项目路由
import { createRouter, createWebHistory } from "vue-router";
 
//引入组件
import Index from "./views/Index.vue";
import Login from "./views/Login.vue";
import NotFound from "./views/Not-found.vue";
//创建路由实例
const router = createRouter({
history: createWebHistory("/admin"), //mode:"history" vue3 路由模式 history: createWebHistory()
routes: [
{
path: "/",
component: () => import("./views/Index.vue"),
},
{
path: "/login",
component: Login,
},
{
path: "/not-found",
component: NotFound,
},
], //路由配置项
//配置滚动行为
scrollBehavior(to, from, savePosiation) {
//回到之前路由组件的滚动位置
if (savePosiation) {
return savePosiation;
}
return { left: 0, top: 0 }; //vue3 返回值存在变化
},
});
//将路由关联到vue3 项目
createApp(App).use(router).mount("#app");

路由配置非路由重定向

{
path: "*",
redirect: "/not-found",
},

{
path: "/:pathMatch(.*)*", //vue2 * vue3 改为正则
redirect: "/not-found",
},
//在官网 路由动态匹配下 not found 404

子路由嵌套

routes: [
{
path: "/",
component: Index,
children: [
{
path: "/index",
component: User,
},
{
path: "/list",
component: List,
},
],
},
{
path: "/login",
component: Login,
},
{
path: "/not-found",
component: NotFound,
},
{
path: "/:pathMatch(.*)*", //vue2 * vue3 改为正则
redirect: "/not-found",
},
], //路由配置项

需要在一级路由界面下 配置二级路由出口

<script setup lang="ts"></script>
<template>
admin
<router-link to="/index">User界面</router-link>
<router-link to="/list">List界面</router-link>
<!-- 二级出口 -->
<router-view></router-view>
</template>

路由的编程导航

vue3 组件为vue2组件写法

代码编程导航一致
// 字符串路径
this.router.push('/users/eduardo')
 
// 带有路径的对象
this.router.push({ path: '/users/eduardo' })

vue3 使用的是setup简写组件

使用vuerouter的组合式api

//引入路由的组合式api
import { useRoute, useRouter } from "vue-router";
//定义接收对象
let route = useRoute();
let router = useRouter();
//跳转登录
let goLogin = () => {
console.log(route, router);
};

代码中编程导航

//跳转登录
let goLogin = () => {
console.log(route, router);
//跳转登录
router.replace(`/login?redirect=${route.path}`);
};

路由传值

1. get路由传值
2. 路由动态匹配传值

get路由传值

1. <router-link to="/list?id=10086&name=张三">List界面</router-link>

<script setup lang="ts">
import { useRoute } from "vue-router";
 
//获取当前路由对象
let route = useRoute();
//使用query接收
console.log(route.query);
</script>
<template>List</template>

路由动态匹配传值

在路由的配置文件path上配置传递参数
path:"/admin/:id"
这种传值方式严格匹配路由路径
<router-link to="/list/10086">List界面</router-link>
 
<script setup lang="ts">
import { useRoute } from "vue-router";
 
let route = useRoute();
//路由动态匹配传值 使用params获取
console.log(route.params);
</script>
<template>User</template>

路由二级默认

项目中路由模块化

index.ts
//配置项目路由
import { createRouter, createWebHistory } from "vue-router";
//导入配置
import routes from "./routes";
 
//创建路由实例
const router = createRouter({
history: createWebHistory("/admin"), //mode:"history" vue3 路由模式 history: createWebHistory()
routes, //路由配置项
//配置滚动行为
scrollBehavior(to, from, savePosiation) {
//回到之前路由组件的滚动位置
if (savePosiation) {
return savePosiation;
}
return { left: 0, top: 0 }; //vue3 返回值存在变化
},
});
 
export default router;

routes.ts 配置文件
//路由配置
//引入组件
import Index from "@/views/Index.vue";
import Login from "@/views/Login.vue";
import NotFound from "@/views/Not-found.vue";
 
import User from "@/views/children/User.vue";
import List from "@/views/children/List.vue";
import Dashborad from "@/views/children/dashborad.vue";
 
export default [
{
path: "/",
component: Index,
redirect: "/dashborad",
children: [
{
path: "/dashborad",
component: Dashborad,
},
{
path: "/index/:id/:name",
component: User,
},
{
path: "/list",
component: List,
},
],
},
{
path: "/login",
component: Login,
},
{
path: "/not-found",
component: NotFound,
},
{
path: "/:pathMatch(.*)*", //vue2 * vue3 改为正则
redirect: "/not-found",
},
];

项目中使用路由守卫

//全局前置
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})
return false 不跳转
 
//跳转其他路由
router.beforeEach((to, from) => {
// ...
// 直接跳转登录界面
return {path:"/login"}
})

项目守卫检测用户是否登录

//路由守卫
//白名单
let whiteList = ["/login", "/not-found"];
router.beforeEach((to, from) => {
console.log("守卫");
// //检测token
let token = localStorage.getItem("_token");
//未登录
if (!token) {
//检测白名单
if (whiteList.indexOf(to.path) == -1) {
//token不存在直接跳转登录
return { path: "/login" };
}
} else {
//已经登录
if (to.path == "/login") {
return { path: "/" };
}
}
});

实现vue3 动态路由添加

1.在路由守卫中登录成功之后 获取menu菜单数据
//1.发送网络请求获取menu数据
// let res=await 接口
//2.网络数据解析
//3.将component 解析为懒加载组件
//4.解析之后的菜单数据 添加路由实例
// router.addRoute("admin", { path: "" });
// router.getRoutes(); 查配置