vue3动态路由路径
当朋友们看到这个文章时想必是想要了解vue3动态路由路径相关的知识，这里同时多从个角度为大家介绍怎么定义vue router的动态路由相应的内容。
本文内容目录一览：
Vue动态路由
我们经常需要把某种模式匹配到的所有路由，全都映射到同个组件。例如，我们有一个 User 组件，对于所有 ID 各不相同的用户，都要使用这个组件来渲染。那么，我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果：
现在呢，像 /user/foo 和 /user/bar 都将映射到相同的路由。
一个“路径参数”使用冒号 : 标记。当匹配到一个路由时，参数值会被设置到 this.$route.params ，可以在每个组件内使用。于是，我们可以更新 User 的模板，输出当前用户的 ID：
你可以看看这个 在线例子 。
你可以在一个路由中设置多段“路径参数”，对应的值都会设置到 $route.params 中。例如：
除了 $route.params 外， $route 对象还提供了其它有用的信息，例如， $route.query (如果 URL 中有查询参数)、 $route.hash 等等。你可以查看 API 文档 的详细说明。
提醒一下，当使用路由参数时，例如从 /user/foo 导航到 /user/bar ， 原来的组件实例会被复用 。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。 不过，这也意味着组件的生命周期钩子不会再被调用 。
复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象：
或者使用 2.2 中引入的 beforeRouteUpdate 导航守卫 ：
常规参数只会匹配被 / 分隔的 URL 片段中的字符。如果想匹配 任意路径 ，我们可以使用通配符 ( * )：
当使用 通配符 路由时，请确保路由的顺序是正确的，也就是说含有 通配符 的路由应该放在最后。路由 { path: '*' } 通常用于客户端 404 错误。如果你使用了 History 模式 ，请确保 正确配置你的服务器 。
当使用一个 通配符 时， $route.params 内会自动添加一个名为 pathMatch 参数。它包含了 URL 通过 通配符 被匹配的部分：
vue-router 使用 path-to-regexp 作为路径匹配引擎，所以支持很多高级的匹配模式，例如：可选的动态路径参数、匹配零个或多个、一个或多个，甚至是自定义正则匹配。查看它的 文档 学习高阶的路径匹配，还有 这个例子 展示 vue-router 怎么使用这类匹配。
有时候，同一个路径可以匹配多个路由，此时，匹配的优先级就按照路由的定义顺序：谁先定义的，谁的优先级就最高。
Vue3+elemetPlus支持动态路由和菜单管理UI框架
内容较多请耐心阅读，你认真读完一定获益匪浅
这是一个基于vuecli+element-plus共同搭建的一个开源vue3动态路由和动态菜单开源框架，总体来说这个项目是非常优秀。你通过使用它直接实现动态路由和菜单管理功能，实现快速开发。支持二级菜单管理和嵌套路由管理。
"element-plus": "^1.0.2-beta.70",
"vue": "^3.0.0",
"vue-router": "^4.0.0-0"
1、unituicli3是一个基于vue3搭建的一个项目，它是 与时俱进 的， 极具时代性，紧跟vue3的脚步 。
2、项目仅仅集成了element-plus和vue-router两个必备的JavaScript库，除此之外没有再集成任何JavaScript库。这也就意味着你可以根据自己的项目需要去安装自己需要的JavaScript库， 避免因为项目集成库过多给你带来烦恼 。
3、强劲的组件管理器，我们为了帮助你实现可视化管理动态路由和菜单，我们内置了《组件管理》功能组件，使 路由和菜单管理可视化 。同时我们为了更好地实现项目管理，在vue2版本的基础上新增了可选json导出功能，让你可以快速实现json数据生成，生成用户权限路由和菜单。
4、美丽的视图框架，我们 内置了一个后台管理UI框架 ，你可以通过使用它实现admin项目的快速生成和搭建。当然你也可以自己搭建自己喜欢的UI框架结构。
5、 更少的干扰 。为了让项目更加纯净，将项目控制权更多的交给开发者，我们新建了unitui文件夹位于src文件夹下用于存放我们内置的部分，为了便于你项目的启动和理解你可以直接将ivews和components文件夹内容清空，重新搭建你的组件，因为这些目录下的文件这些并不重要。
Unituicli3因为《组件管理》而显得强大，因为这是 核心组件 ，将动态路由（添加、删除、修改）、嵌套路由和菜单管理（添加、删除、修改）变得可视化，而且支持json数据生成使前后端间交互变得可能，你只需要将生成的json储存在数据库便可实现权限编辑。
我们虽然尽力减少对开发者的影响，但是做出一些修改是不可避免的。
import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import App from './App.vue'
import router from './router'
import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失
const app = createApp(App)
app.use(ElementPlus)
app.use(router).mount('#app')
// 注册全局组件
import Uicon from './unitui/sub/Uicon.vue'
app.component('Uicon',Uicon)
你如果不是使用elementPlus作为你的UI你可以参考上面内容做出适当修改
这是一个全局注册的图标选择器，你可以在任意组件通过 使用图标选择器，它挂载在main.js文件中，你如不是使用element你需要做出修改，否则可能 影响图标选择的功能使用 。
实际效果
这是一个非常重要的内置组件，它主要用于模拟登录时的操作和信息生成，它会读取位于assets/json/文件夹下的两个json生成菜单和路由信息，json内容模拟后端返回的内容。
其中最重要的是路由的生成，你在登录后路由json信息返回后调用init_route方法，代码如下：
init_route(route_data) {
//依据后端返回的json数据生成路由
const init_route_data = []; //定义一个路由数组储存生成的路由信息
for (let index = 0; index route_data.length; index++) {
//循环后端返回的json
//循环
if (route_data[index].children != undefined) {
//有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () = import(`@/${route_data[index].component}`),
// component: (resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
},
children: [] //嵌套路由
};
for (let i = 0; i route_data[index].children.length; i++) {
init_route_data[index].children[i] = {
path: route_data[index].children[i].path, //路由url
name: route_data[index].children[i].name, //路由名
component: () = import(`@/${route_data[index].children[i].component}`),
// component:(resolve) = require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].children[i].meta.show_site, //是否全屏显示
web_title: route_data[index].children[i].meta.web_title //网站标题
}
};
}
} else {
//没有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () = import(`@/${route_data[index].component}`),
// component:(resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
}
};
// console.log(index);
}
}
// console.log(init_route_data); //打印生成初始化路由数组
for (let index = 0; index route_data.length; index++) {
//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加
this.$router.addRoute(init_route_data[index]); //循环添加数组
}
this.init_menu(); //执行菜单生成方法
},
其他三个你可以随意修改
在vue2动态路由项目之中，在app.vue文件mounted方法中调用路由生成方法，可以实现刷新路由防丢失，但是在vue3中采用同样方式，则会出现异常，原因是我们跳转发生在路由添加前，所以会出现刷新后页面没有内容，所以我们在unitui文件夹下新建init_route.js写下和login.vue文件中路由初始化相似的内容，然后再main.js中引入。
init_route.js内容：
import router from '@/router'
function init_route() {
//依据后端返回的json数据生成路由
if (sessionStorage.getItem("route_data") != null) {
const route_data = JSON.parse(sessionStorage.getItem("route_data"));
// console.log(route_data);
const init_route_data = []; //定义一个路由数组储存生成的路由信息
for (let index = 0; index route_data.length; index++) {
//循环后端返回的json
//循环
if (route_data[index].children != undefined) {
//有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () = import(`@/${route_data[index].component}`),
// component: (resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
},
children: [] //嵌套路由
};
for (let i = 0; i route_data[index].children.length; i++) {
init_route_data[index].children[i] = {
path: route_data[index].children[i].path, //路由url
name: route_data[index].children[i].name, //路由名
component: () =
import(`@/${route_data[index].children[i].component}`),
// component:(resolve) = require([`@/views/${route_data[index].children[i].component}`], resolve), //加载后端json描述的vue文件
meta: {
//路由一些附加信息
show_site: route_data[index].children[i].meta.show_site, //是否全屏显示
web_title: route_data[index].children[i].meta.web_title //网站标题
}
};
}
} else {
//没有children时生成路由数组方法
init_route_data[index] = {
path: route_data[index].path, //路由url
name: route_data[index].name, //路由名
component: () = import(`@/${route_data[index].component}`),
// component:(resolve) = require([`@/views/${route_data[index].component}`], resolve), //加载后端json描述的vue文件
meta: {
show_site: route_data[index].meta.show_site, //是否全屏显示
web_title: route_data[index].meta.web_title //网站标题
}
};
// console.log(index);
}
}
// console.log(init_route_data); //打印生成初始化路由数组
for (let index = 0; index route_data.length; index++) {
//由于addRoutes已经废弃，所以需要循环使用addRoute进行数组添加
router.addRoute(init_route_data[index]); //循环添加数组
}
// 这里放置刷新
// console.log('app');
// const index=window.location.href.lastIndexOf("#")
// const url=window.location.href.substring(index+1,window.location.href.length);
// this.$router.push(url)
}
}
init_route()
在main.js中引用：
import '@/unitui/init_route.js'//这是为了实现防止刷新路由丢失
此时便可完成刷新自动初始化
我们通过在app.vue文件中通过获取路由中meta. show_site的值（0全屏显示，1显示在视图内），然后使用 v-if控制不同router-view的显示来实现显示位置的控制。
App.vue源码：
1、如果你不喜欢我们的ui框架，你需要开发新的ui时，没有ui框架的支持《组件管理》功能可能不能正常显示（显示空白），你可以将unitui/ subadmin/ SubAdmin.vue文件中style部分改为：
#sub_admin_back {
width: 100%;
/* 非ui框架将height写为height: 100vh; */
height: 100vh;
background-size: cover;
position: relative;
background-color: #ffffff;
border-radius: 10px;
}
1、没能尽可能减少对框架的干扰，你仍然需要保持对main.js的适当修改。
vue 动态路由/路由权限 解决方案
路由权限思路：
1.菜单栏/导航栏(一级权限)
在登录成功后，获取后端的权限数据, 根据权限数据，展示对应的路由导航或菜单即可;
2.界面的控制
如果用户没有登录, 用户手动在地址栏输入路由地址，则需要跳转到登录界面.
如果用户已经登录, 用户手动输入的非权限内的路由地址，则给他跳转到404界面.
3.按钮的控制(二级权限)
在页面中，有些账号有: 添加，删除，修改，增加等权限, 有些没有.
没有权限的账号在这个页面只是可以浏览页面中的数据，需要对这些按钮 禁用or隐藏。
4.请求和响应的控制 （这一步其实后端也会根据token判断身份信息, 来返回数据，可以省略）
如果用户通过非常规的手段(可能是同行), 比如通过浏览器f12将禁用的按钮disabled 改成false, 隐藏的按钮apacity:0改成了1，这些按钮就可以使用了，此时需要对按钮点击后发出的请求作出拦截.
login.vue
home.vue (elment-ui)
侧边导航栏
store.js
router.js
动态路需两个地方调用:
1 login.vue 中登录成功后立即执行动态路由函数
2 app.vue中, 在根组件中添加执行动态路由函数，这样每一次用户刷新，就会执行，否则刷新之后，动态路由就没了
思路3：按钮的控制(二级权限): 这里我是通过 自定义指令来实现 对按钮(增,删,改等二级权限按钮) 的显示隐藏。
更简单直接的方式，直接就在html中对button添加v-if显示隐藏即可
import './utils/permission.js' -- main.js中引入文件, 嫌麻烦直接在main.js中写
4 服务器返回状态码401, 代表token超时 or token被串改 or 未传token, 此时强制跳转到登录页重新登录
vue3 + ts 后台动态路由菜单渲染
1，创建菜单所以对应的页面
2，创建页面所对应的路由
这里使用了一个插件 coderwhy
使用这个命令符可以快速搭建出上述页面
3，创建map-menus.ts文件
然后在你对应想要获取路由表的地方使用map-menus.ts文件中导出的mapMenusToRoutes函数就可以得到路由表，我的首页叫做mian
参考：
然后菜单组件：
数据返回是这样哒：
最后长这样：
vue动态路由
template
el-container style="height: 100vh; border: 1px solid #eee"
el-aside width="200px" style="background-color: rgb(238, 241, 246)"
!-- :default-openeds="['1', '3']" 表示默认打开第一个和第三个菜单 --
!-- 1 对应了el-submenu index="1"
2 对应了el-submenu index="2" --
!-- el-submenu index="1-1 表示把el-submenu当作是第一个导航的第一个子项--
!-- :router="true 使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转 --
!-- default-active="/index/users" --
!-- ★ :default-openeds 不可以直接使用['1'] 需要使用一个变量openList代替 因为值随时会变 如果写的
是['1'] 那么就永远不会改变 会出现点击二级菜单 一级菜单会缩起来的情况--
!-- default-active="/index/users" 表示一进入页面就默认激活/index/user导航菜单
default-active不能直接写死值路径要用变量代替 使用监听器 监听路由解决 --
!-- unique-opened 是否只保持一个子菜单的展开 boolean 默认是false--
el-menu
:default-openeds="openList"
:router="true"
:default-active="pagepath"
:unique-opened="true"
!-- index接收的字符串类型，(i+1)是数字类型，所以使用toString方法转成字符串 传给index --
!-- 因为i是从0开始的 所以需要加1 --
el-submenu
:index="(i + 1).toString()"
v-for="(v, i) in navList"
:key="i"
template slot="title"
i class="el-icon-menu"/i{{ v.authName }}/template
!-- 子选项需要改成例如：1-1格式 以字符串的形式传给index属性 --
!-- 因为子选项也是一个数组所以需要再次循环 --
!-- :index="'/index/'+item.path" 路径最前面必须加上/ 否则会出现路径覆盖的问题 --
el-menu-item
:index="'/index/' + item.path"
v-for="(item, index) in v.children"
:key="index"
{{ item.authName }}/el-menu-item
/el-submenu
/el-menu
/el-aside
el-container
el-header style="text-align: right; font-size: 12px"
el-dropdown
i class="el-icon-setting" style="margin-right: 15px"/i
el-dropdown-menu slot="dropdown"
el-dropdown-item查看/el-dropdown-item
el-dropdown-item新增/el-dropdown-item
el-dropdown-item删除/el-dropdown-item
/el-dropdown-menu
/el-dropdown
span王小虎/span
/el-header
el-main
router-view/router-view
/el-main
/el-container
/el-container
/template
script
import axios from "axios";
export default {
data() {
return {
navList: [],
openList: ["1"],
pagepath: "/index/users",
};
},
watch: {
/* 当路由发生变化的时候，就把最新的地址给到pagepath变量
作用是为了保持路由菜单栏的高亮显示 以及解决点击不跳转的bug */
$route: {
handler: function (newV) {
this.pagepath = newV.path;
},
immediate: true,
},
},
created: function () {
this.getNavList();
},
methods: {
getNavList: function () {
axios
.get("/mock/menu.json", {
headers: {
Authorization: localStorage.token,
},
})
.then((res) = {
let { data, meta } = res.data;
/* 数据获取成功 */
if (meta.status == 200) {
this.navList = data;
/* 动态添加路由菜单 */
/* 因为第一个路由是默认，所以我们从第二个路由开始动态添加 */
/* slice不会改变原数据 而splice会 */
let arr = this.navList.slice(1,3);
/* 循环路由数组 动态添加路由 */
arr.forEach(v = {
/* 我们尽量使用v.children[0].path 原因是我们的路径名用的是子路由的 */
/* 如果我们直接写死v.children[0].path 会导致只有一个子路由路径被动态添加了
如果有多个，就无法生效了，所以我们要二次循环v.children,从而实现多个二级子路由
能够被动态的添加 */
v.children.forEach(r={
this.$router.addRoute("index", {
path: r.path,
name: r.path,
/* 把名字改成我们页面的名称 例如CategoriesView.vue */
component: () = import(`@/views/${r.path.substring(0,1).toUpperCase()+r.path.substring(1)}View.vue`),
});
})
});
console.log(this.$router)
} else {
/* 防止数据获取失败，给出相应的后台提示 */
this.$message.error(meta.msg);
}
})
.catch((err) = {
console.log(err);
});
},
},
};
/script
style scoped
.el-header {
background-color: #b3c0d1;
color: #333;
line-height: 60px;
}
.el-aside {
color: #333;
}
/style
vue3动态路由路径的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于怎么定义vue router的动态路由、vue3动态路由路径的信息别忘了在本站进行查找喔。
