Elementui实现面包屑($route.matched)

news/2024/7/10 3:01:42 标签: vue, elementui

this.$route.matched匹配到的会是一个数组,包含当前页面之前所有路由信息。然后我们可以直接利用路由信息渲染我们的面包屑导航。

//demo
<template>
	<div class="nav-wrap">
    <router-link v-for="(item, index) in navList" :key="index" :to="{ path: item.path }>
  		{{ item.name }} {{index !== list.length - 1 ? '/' : ''}}
  	</router-link>
  </div>
</template>
<script>
	export default {
    data() {
      navList: []
    },
    created(){
    	this.getNavList()
  	},
    watch: {
      $route(){
         this.getNavList()
      }
    },
    methods: {
      getNavList() {
        this.navList = this.$route.matched
      }
    }
  }
</script>

http://www.niftyadmin.cn/n/1527251.html

相关文章

Vue中$router和$route的常用api

一、$router router是VueRouter的一个对象&#xff0c;通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象&#xff0c;这个对象中是一个全局的对象&#xff0c;他包含了所有的路由包含了许多关键的对象和属性。 $router.push // 字符串 this.$router.push…

Vue动态组件(:is)

概念&#xff1a; 让多个组件使用同一个挂载点&#xff0c;并动态切换&#xff0c;这就是动态组件。 通过使用保留的 <component> 元素&#xff0c;动态地绑定到它的 is 特性&#xff0c;可以实现动态组件 1、基础用法 <div id"example"><button c…

Vue中路由表单缓存(keep-alive)

vue 中从一个路由切换到另一个路由的时候&#xff0c;第一个路由可能有表单信息&#xff0c;但切换到第二个路由时&#xff0c;第一个路由里的组件会被销毁&#xff0c;表单里填写的 value 也会消失&#xff0c;keep-alive 就可以帮我们缓存我们不想被销毁的组件。 页面效果&a…

TCP总结:socket

文章目录 参考简介正常TCP 建链、拆链示例半连接定义(TCP, 已建立的链接,收到PUSH包,不带ACK,会被drop)TCP 发送rst的情况已建立的链接,收到PUSH包,不带ACK,会被drop导致进程假死的表面现象TCP push 消息重传次数设置为什么tcp/udp 端口个数时65535个?tcpdump 抓包忽略T…

Core dump 分析实例一

64位机,从log里得到的backtrace信息:00007f0af65c7079 00007f0af65f20e1;是动态链接库的地址 /usr/lib64/libc-2.17.so: 7f0af657a000-7f0af6943000 通过objdump -D 反编译libc-2.17.so 文件,可以查找到对应的coredump发生的位置。 00007f0af65c7079 - 7f0af657a000 = 4…

Mobx的使用

文章目录1、Mobx简介2、Mobx的使用2.1、环境搭建2.2、Mobx基础操作2.2.1、observable可观察的状态2.2.2、 observable装饰器2.2.3、对 observables 作出响应3、在react项目中使用mobx3.1、环境搭建3.2、案例核心代码1、Mobx简介 2、Mobx的使用 2.1、环境搭建 创建项目 mkdi…

Linux 日志:Loading kernel module for a network device with CAP_SYS_MODULE (deprecated)

CAP_SYS_MODULE已经被遗弃&#xff0c;不再使用&#xff0c;如果有module 还在使用的话&#xff0c;就会打印这条log&#xff1b;希望引起module开发者的注意&#xff0c;尽快使用新的选项。 pr_warn("Loading kernel module for a network device with CAP_SYS_MODULE (…

Webpack搭建ES6开发环境和React环境

文章目录Webpack搭建ES6开发环境1、什么是Webpackwebpack 解决什么问题&#xff1f;2、为什么要使用 webpack &#xff1f;3、Webpack搭建ES6开发环境步骤第一步 安装模块第二步 创建目录结构第三步 搭建本地服务Webpack搭建React开发环境1、React环境搭建实现React开发的三种方…