vue动态路由
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue动态路由相关的知识,希望对你有一定的参考价值。
参考技术A <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>
以上是关于vue动态路由的主要内容,如果未能解决你的问题,请参考以下文章