vue怎么在地址栏隐藏路由

最新推荐文章于 2024-05-07 17:19:04 发布

终不似、少年游

最新推荐文章于 2024-05-07 17:19:04 发布

阅读量3.8k

点赞数 1

分类专栏： web前端学习笔记文章标签： vue

本文链接：https://blog.csdn.net/qq_45780380/article/details/116838824

版权

web前端学习笔记专栏收录该内容

61 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在Vue应用中通过`<el-menu>`和`<keep-alive>`组件配合，实现在地址栏不显示路由的情况下切换不同的组件。步骤包括引入并注册组件、渲染左侧菜单、使用`<keep-alive>`缓存组件状态，以及添加菜单点击事件来动态更新当前组件。

摘要由CSDN通过智能技术生成

vue怎么在地址栏隐藏路由：

1.首先我们把我们要跳转的页面引入并注册：

<script>
import cate from './goods/Cate'
import rights from './power/Rights'
import role from './power/Roles'
import user from './user/Users'
export default {
  name: "Home",
  data (){
    return {
      //左侧菜单数据；
      list: ['cate', 'rights', 'role', 'user'],
      menuList: [],
      isCollapse:false,
      activePath:'',
      currentComponent: 'cate'
    }
  },
  components: {
    cate,
    rights,
    role,
    user
  },

2.渲染左侧树：

<el-menu-item-group>
                <el-menu-item v-for="(v,i) in list" :key="i" :index="v">{{ v }}</el-menu-item>
              </el-menu-item-group>

3.在要显示内容的区域写下代码：

<keep-alive>
              <component :is="currentComponent"></component>
 </keep-alive>

4.给树添加点击事件

<el-menu
              
              @select="selectMenu"
            >


methods:{
    selectMenu(index, indexPath) {
      console.log(index, indexPath)
      this.currentComponent = index;
    },