使用el-menu， vue-router进行路由跳转

柔光的暖阳◎ 2021-07-25 21:36 1262阅读 0赞

html

<el-menu
        router
        @select="handleSelect"
        :default-active="this.$router.path"   
      >
        <el-menu-item index="/"> 首页 </el-menu-item>
        <el-submenu index="1">
             <template slot="title">页面导航</template>
             <el-submenu index="1-1">
    	         <template slot="title">项目</template>
    	         <el-menu-item index="/nav/project-info"> //跳转的路由地址
    	         	项目管理
    	        </el-menu-item>
            </el-submenu>
        </el-submenu>
    </el-menu>

router文件

import Vue from "vue";
    import VueRouter from "vue-router";
    import Home from "./views/Home.vue";
    
    import Nav from "./views/Nav.vue";
    import Index from "./views/Index.vue";
    
    
    // 要告诉 vue 使用 vueRouter
    Vue.use(VueRouter);
    
    const routes = [
      { 
        path: "/",
        name: "Home",
        component: Home
      },
      { 
        path: "/nav",
        name: "Nav",
        component: Nav,
        // redirect: {name: "Index"}, // 跳转到下一级第一个
        children: [
          { 
            path: "index",
            name: "index",
            component: Index,
            children: [
              { 
                path: "project-info",
                name: "ProjectInfo",
                component: () => import("../index/project-info/App.vue")
              },
            ]
          }
        ]
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，1262人围观）

还没有评论，来说两句吧...

相关阅读

相关 VueRouter路由嵌套

1. 前言本小节我们介绍如何嵌套使用 VueRouter。嵌套路由在日常的开发中非常常见，如何定义和使用嵌套路由是本节的重点。同学们在学完本节课程之后需要自己多尝试配置

怼烎@/ 2024年03月30日 18:02/ 0 赞/ 98 阅读

相关 VueRouter路由传参

1. 前言本小节我们介绍 VueRouter 路由组件传参。包括 params 传参、query 传参的两种方式。路由传参的知识点非常重要，在日常开发中，我们经常会通过

Myth丶恋晨/ 2024年03月27日 08:47/ 0 赞/ 107 阅读

相关 Vue 路由跳转

文章目录前言路由基础子路由路由传参 query 传参 path 静态传参动态传参

我就是我/ 2023年10月13日 10:39/ 0 赞/ 22 阅读

相关 Vue 路由及路由跳转

让根组件自动的挂载其它组件，而不是手动挂载。 1. 安装： > cnpm install vue-router --save 1. 在main.js中引入并使用v

朴灿烈づ我的快乐病毒、/ 2022年12月22日 14:29/ 0 赞/ 275 阅读

相关 Nuxt.js 使用路由跳转

Nuxt.js 使用路由跳转 Nuxt.js 可以用路由名称或者页面路径进行跳转第二个参数是页面之间的传参 this.$router.push({

素颜马尾好姑娘i/ 2022年12月19日 11:48/ 0 赞/ 417 阅读

相关 JS实现路由跳转

之前我们用AngularJS实现路由跳转，这一篇我们将用JS实现路由跳转。示例图： ![Center][] 源码： <!DOCTYPE html>

柔情只为你懂/ 2022年06月07日 09:10/ 0 赞/ 308 阅读

相关【Vue】路由跳转

[【Vue】路由跳转][Vue] 路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里

悠悠/ 2021年12月17日 18:30/ 0 赞/ 504 阅读

相关【Vue】路由跳转

路由跳转有几种方式，我用的最多的是$router.push的方法：实践：例如下面的页面，要求点详情跳转到详情页。 ![在这里插入图片描述][watermark_

清疚/ 2021年12月15日 06:55/ 0 赞/ 482 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 657 阅读

相关使用el-menu， vue-router进行路由跳转

html <el-menu router @select="handleSelect" :default-active

柔光的暖阳◎/ 2021年07月25日 21:36/ 0 赞/ 1263 阅读