Vue和Element UI 路由跳转,侧边导航的路由跳转
首先看布局,因为我的用于页面显示的<router-view> 是通过重定向定位到登陆页的,然后通过登陆页跳转到主页。
首先看布局,因为我的用于页面显示的 <router-view> 是通过重定向定位到登陆页的,然后通过登陆页跳转到主页。
在APP中代码:
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
路由中代码:
使用重定向,将首页重新定位到登陆页。
const routes = [
{
path: '/',
redirect: '/login',
}
]
点击登陆按钮后,跳转的主页。是给登陆按钮添加事件,通过 this.$router.push(); 进行页面跳转:
<el-button type="primary" @click="submitForm()">
登陆
</el-button>
methods: {
submitForm() {
this.$router.push({ path: "/Homepage" });
},
},
PS: 使用 this.$router.push(); 时要注意 .push({ path: “/Homepage” }) 要写成这种样式,如果写成 .push("/Homepage" ) 会失效,我也不知道为什么
进入主页后,编写 侧边导航 ,我使用的是动态渲染的方法,这里仅展示一部分数据
<el-aside>
<el-menu background-color="#0080c9"
text-color="#ffffff"
router
:default-active="this.$route.path">
<!-- 动态渲染数据 -->
<template v-for="submenu in menus">
<el-submenu :index="submenu.id" :key="submenu.id">
<template slot="title"> {{ submenu.title }} </template>
<template v-for="menu in submenu.children">
<el-menu-item :index="menu.routerTo" :key="menu.id">
{{ menu.title }}
</el-menu-item>
</template>
</el-submenu>
</template>
</el-menu>
</el-aside>
data() {
return {
menus: [
{
title: "基础数据管理",
id: "1",
children: [
{
title: "用户管理",
id: "1-1",
routerTo: "/Homepage/UserManagement",
},
{ title: "品项管理", id: "1-2" },
{ title: "品项类型管理", id: "1-3" },
{ title: "仓库管理", id: "1-4" },
],
},
]
}
}
需要注意的是如果要使导航栏可以进行路由跳转,
在 <el-menu> 中添加 router 属性
(router:是否使用 vue-router 的模式,启用该模式会在激活导航时以 index 作为 path 进行路由跳转)
在 <el-menu> 中添加 :default-active=“this.$route.path” 属性
(:default-active:当前激活菜单的 index)PS:我不是很理解它的作用,但是添加上就可以实现
在 <el-submenu> 中的 index 属性值就是跳转的路径
还有因为主体内容显示需要放在标签页中,所以在标签页中设置了 <router-view> ,等会显示的页面会显示在这里,而且因为在初始化页面时就使用了 <router-view> 所以这里需要使用 命名视图
<!-- 主体内容 -->
<el-main>
<!-- 标签栏 -->
<el-tabs type="card" editable v-model="editableTabsValue">
<!-- 首页标签 -->
<el-tab-pane label="首页" name="/" :closable="false"></el-tab-pane>
</el-tabs>
<div class="contentBox">
<router-view name="main"></router-view>
</div>
</el-main>
路由代码:
要注意的是嵌套关系,因为要跳转的页面是在主页的中显示,所以是嵌套关系。
而且子组件是要显示在命名视图 <router-view name=main> 中,所以 component 属性要加 S 用 {视图名 : 组件名}
的形式
// 主页
{
path: '/homepage',
name: 'homepage',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "Homepage" */ '../views/Homepage.vue'),
children: [
{
name: "UserManagement",
path: "UserManagement",
components: { main: UserManagement }
}
]
},
更多推荐
所有评论(0)