其他分享
首页 > 其他分享> > 7.30 vue 面包屑

7.30 vue 面包屑

作者:互联网

面包屑

  1. 在路由中添加一个title属性
    在这里插入图片描述
  2. 在面包屑组件中监听路由
    直接通过生命周期函数,可能不能够准确的每次路由跳转
  watch: {
    $route(to, from) {
      let matched = to.matched;
      this.lists = matched;
      console.log("lists", this.lists);
    },
}

3.渲染到页面

<template>
  <div>
    <div class="breadcumb">
      <ul>
        <li v-for="(v, i) in lists" :key="i">
          <span>&lt;&lt;</span>
          <router-link :to="v.path">{{ v.meta.title }}</router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

标签:7.30,vue,title,lists,lt,面包屑,路由,matched
来源: https://blog.csdn.net/qq_43604714/article/details/119254963