页面中使用elementui的面包屑

叁歲伎倆 2023-01-15 02:24 138阅读 0赞

使用场景：点击资源列表中的某一行，可以跳转到该行详情，涉及层级关系，考虑用面包屑导航，为了防止面包屑导航在页面刷新时不存在，考虑监听路由参数的变化  
![在这里插入图片描述][20210421112325591.gif]  
分析：假设面包屑导航的名字为 ：全部 > test1 > test2  
全部对应的路由参数为 `/`  
test1 对应的路由参数为 `/test1`  
test2 对应的路由参数为 `/test1/test2`

结论：面包屑的名字根据 路由查询参数.split(’/’)分割的数组获取  
面包屑的 `:to` 导航把面包屑的名字按 .join(’/’) 拼接起来  
防止刷新页面丢失面包屑，需要根据路由参数获取面包屑的名字

代码部分  
template部分

<el-breadcrumb separator=">">
      <template v-for="(item, index) in breadcrumb">
        <el-breadcrumb-item v-if="index < (breadcrumb.length - 1)" :key="index" :to="{ path: '/info/resource', query: { path: setQueryPath(index) } }">{
       { item }}</el-breadcrumb-item>
        <el-breadcrumb-item v-else :key="index">{
       { item }}</el-breadcrumb-item>
      </template>
      <el-breadcrumb-item v-if="breadcrumb.length === 1"></el-breadcrumb-item>
    </el-breadcrumb>

js部分

data () { 
    	return { 
    		breadcrumb: [],
    	}	
      },
      created () { 
        this.getList()
        if (this.$route.query.path === undefined || this.$route.query.path === '/') { 
          this.breadcrumb = ['我的资源']
        } else { 
          this.breadcrumb = [...['我的资源'], ...this.$route.query.path.split('/').slice(1)]
        }
      },
      watch: { 
        $route (val) {  // 监听路由参数变化
          if (val.query.path === undefined || val.query.path === '/') { 
            this.list.filters.path = '/'
            this.breadcrumb = ['我的资源']
          } else { 
            this.list.filters.path = val.query.path
            this.breadcrumb = [...['我的资源'], ...val.query.path.split('/').slice(1)]
          }
          this.getList()
        }
      },
      methods: { 
        setQueryPath (index) {  // 设置面包屑的query参数
          const tmp = JSON.parse(JSON.stringify(this.breadcrumb))
          if (index === 0) { 
            return '/'
          } else { 
            return '/' + tmp.slice(1).slice(0, index).join('/')
            // return tmp.slice(0, index + 1).join('/')
          }
        },
        rowClick (row, column) {  // 表格行被点击
          this.$router.push({  path: '/info/resource', query: {  path: row.path } })
        },
     }

[20210421112325591.gif]: /images/20221022/5e90942b47194f69afdcce1460c0394b.png