-- Vue中借助router-link标签实现路由的切换 --> <router-link class="list-group-item" active-class="active" to="/about">About</router-link> <router-link class="list-group-item" active-class="active" to="/home">Home</router-link> </div> </div> <div class="col-xs-6"> <div class...
const activeMenu = ref(router.currentRoute.value.path); const handleSelect = (key, keyPath) => { router.push(keyPath); }; onMounted(() => { // 监听路由变化,更新 activeMenu router.beforeEach((to, from, next) => { activeMenu.value = to.path; next(); }); }); return...
import Layout from '@/layout/index.vue' import { page01Constant } from '../constant' const _import = require('../_import_' + process.env.NODE_ENV) const page01Router: RouteConfig = { path: '/page01', component: Layout, redirect: '/page01/index', meta: { activeMenu: page01Consta...
0,0,0)":default-active="activeMenu"><sidebar-itemv-for="(item, index) in routes":key="index":item="item"/></el-menu></div></template><script>import{ routes }from'@/router'importSidebarItemfrom'./sidebarItem.vue'exportdefault{components...
el-main中的内容替换为 <router-view></router-view> el-menu中添加 router属性 然后导入base-routes.ts 文件,并添加如下代码 constmenu =routes;return{ menu, }; 完整的HelloWorld.vue代码如下 <template> <div style="height: calc(100vh); overflow: hidden"> ...
// 设置router 为了子组件:index="item.path" 绑定做跳转页面<template><div><el-scrollbarwrap-class="scrollbar-wrapper"><el-menurouter:default-active="activeMenu":collapse="isCollapse":background-color="variables.menuBg":text-color="variables.menuText":unique-opened="false":active-text-color="...
text-color="#fff"class="el-menu-vertical":collapse="isCollapse":router="true":default-active="activeMenu":unique-opened="false"><SideBarItemv-for="item in routes":key="item.name":item="item":base-path="item.path"/></el-menu></div></template><script>import { mapState } from '...
7 因为还有子路由的菜单需要使用到el-submenu标签，它封装了展开/收起箭头。所以我们先从路由中提取出没有子路由的对象，直接通过el-menu-item标签来实现即可。而没有子菜单的菜单我们希望点击时能只能跳转路由，所以我们可以在el-menu-item外包裹个router-link标签，通过to属性来指向对应的路由。8 接着我们继续将...
3.创建router配置文件 创建文件:在src目录下创建"router"文件夹,里面创建"index.js" index.js里面配置代码如下: 代码语言:javascript 复制 import VueRouter from 'vue-router' //引用自定义的组件 import ShouYe from '@/components/ShouYe' import User_Center from '@/components/User_Center' import user_manag...
我们可以参考 vue-router 的设置 和 el-menu 的参数,设置一个适合我们需求的结构: ./router.js 代码语言:javascript 复制 import{createRouter}from'@naturefw/ui-elp'importhomefrom'../views/home.vue'constrouter={/** * 基础路径 */baseUrl:baseUrl,/** ...