美文网首页js css html
路由和侧边栏

路由和侧边栏

作者: 浅浅_2d5a | 来源:发表于2022-07-20 13:40 被阅读0次

    路由和侧边栏是组织起一个后台应用的关键骨架。
    本项目中侧边栏和路由是绑定在一起的(之前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

    相关文章

      网友评论

        本文标题:路由和侧边栏

        本文链接:https://www.haomeiwen.com/subject/jsfnsrtx.html