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;
    },
Logo

前往低代码交流专区

更多推荐