路由和侧边栏是组织起一个后台应用的关键骨架。
本项目中侧边栏和路由是绑定在一起的(之前hs的权限管理系统也如此),只需要配置路由,侧边栏就能动态生成了。
设置路由的规则:
// 如果不想让侧边栏出现该条菜单,设置
hidden: true // (默认 false)
// 401 和 404 这种页面多是全屏,需要配置根级路由
所以,根级路由配置401、404 不需要 设置hidden:true
// 面包屑部分不具有重定向功能,没有销售,颜色不变
redirect: 'noRedirect'
// 当路由中children内子路由长度大于1 和 等于1
等于1的时候 父节点的菜单不显示,显示children内的菜单,子菜单作为根菜单显示,无子菜单(注意:子节点不设置 hidden: true,并且都设置meta中的title)
大于1的时候 菜单会变成嵌套的(2层路由都显示)
// 一直显示跟路由
alwaysShow: true
name: 'router-name' // 设定路由的名字,一定要填写不然使用<keep-alive>时会出现各种问题
meta: {
roles: ['admin', 'editor'] // 设置该路由进入的权限,支持多个权限叠加,你可以在根路由设置权限,这样它下面所有的子路由都继承了这个
权限
title: 'title' // 设置该路由在侧边栏和面包屑中展示的名字
icon: 'svg-name' // 设置该路由的图标,支持 svg-class,也支持 el-icon-x element-ui 的 icon
noCache: true // 如果设置为true,则不会被 <keep-alive> 缓存(默认 false)
breadcrumb: false // 如果设置为false,则不会在breadcrumb面包屑中显示(默认 true)
affix: true // 如果设置为true,会始终固定在tags-view中(默认 false),没有关闭的x
// 在特殊页面,指定高亮菜单 activeMenu: '/article/list' (需要全路径)
// 使用场景
1、详情文章页面,高亮文章列表菜单
2、编辑页面,高亮列表菜单
}
路由分为两种,constantRoutes 和 asyncRoutes。
constantRoutes: 代表那些不需要动态判断权限的路由,如登录页、404、等通用页面。
asyncRoutes: 代表那些需求动态判断权限并通过 addRoutes 动态添加的页面。
如果使用动态路由,404页面一定要放到最后,否则404后面的路由配置无效,都进入到404页面
递归组件:SidebarItem 自己调用了自己
submenu 是嵌套子菜单 el-menu-item是链接
el-menu中设置:unique-opened="false" 是否只保持一个子菜单的展开
如果你的路由是多级目录, 有三级路由嵌套的情况下,不要忘记还要手动在二级目录的根文件下添加一个 <router-view>
。
思考:如果页面中有多个三级目录,可以弄个routerViewTemplate,在二级component中引入
<template>
<div>
<router-view />
</div>
</template>
原则上有多少级路由嵌套就需要多少个<router-view>。
注意:
用户点击当前高亮的路由并不会刷新 view,因为 vue-router 会拦截你的路由,它判断你的 url 并没有任何变化,所以它不会触发任何钩子或者是 view 的变化
思考:点击菜单时,刷新网址
image.png
methods:
testClick(key) {
this.$router.push({
path: key,
query: {
t: +new Date() //保证每次点击路由的query项都是不一样的,确保会重新刷新view
}
})
}
关于局部刷新的第二种方法:
跳转到Redirect页面之后再重定向到原始页面
router.js中配置redirect页面
7438e6d1adce68efc0fd6ec81cdf110.jpg
刷新页面时候触发的方法
refreshView() {
// In order to make the cached page re-rendered
this.$store.dispatch('tagsView/delAllCachedViews', this.$route)
const { fullPath } = this.$route
this.$nextTick(() => {
this.$router.replace({
path: '/redirect' + fullPath
})
})
}
重定向页面的代码
<script>
export default {
created() {
const { params, query } = this.$route
const { path } = params
this.$router.replace({ path: '/' + path, query })
},
render: function(h) {
return h() // avoid warning message
}
}
</script>
注意:path: '/redirect/:path(.)',:path是params传参 (.)是正则
正则中
.代表任意字符
代表0个或多个
()不属于正则语法,就是通过() 写正则
可能有1层path(http://localhost:9527/#/dashboard)、多层path(http://localhost:9527/#/components/json-editor)
只设置path: '/redirect/:path', 是不能匹配多级路由的(/redirect/components/json-editor)所以设置了path: '/redirect/:path(.)'
面包屑:
通过watch $route 变化动态生成面包屑元素。当进入刷新页面(刷新页面属于临时中转页面)不重新生成面包屑成分
侧边栏外链:
在对应路由的path设置外链地址,点击菜单就能跳转对应页面
Link组件部分
vue 提供了一个内置的 <component> 组件,专门用来实现动态组件的渲染
component组件,有is属性,可以指定要渲染什么组件
外面套一层<keep-alive> 可以缓存动态组件
<keep-alive>
<component :is="comName"/>
</keep-alive>
keep-alive 知识点:
keep-alive 会把内部的组件进行缓存,而不是销毁组件;
使用 keep-alive 的时候,可以通过 include 指定哪些组件需要被缓存;或者,通过 exclude 属性指定哪些组件不需要被缓存;但是:不要同时使用 include 和 exclude 这两个属性;
include 属性用来指定:只有名称匹配的组件会被缓存。多个组件名之间使用英文的逗号分隔:
<keep-alive include="LeftCom,RightCom">
<component :is="type" v-bind="linkProps(to)"/> 中v-bind={}是一种合并写法
独立写法和合并写法含有共同属性,要看3x和2x
4b0edf01a1925382755c40c0c738d3a.jpg
思考:
不论3x,2x 把独立的写在后面,替换,也是以独立的为准
侧边栏有两种形式即:submenu 和 直接 el-menu-item。 一个是嵌套子菜单,另一个则是直接一个链接
可以通过default-openeds,设置侧边栏默认展示菜单
注意 :default-openeds="['/example','/nested']" 里面填写的是 submenu 的 route-path
网友评论