Preface: The cooperation between router-view and NavMenu navigation bar is very common in web applications. The principle is to adopt the SPA (single-page-application) mode, which is an application with only one Web page, and the refresh and iteration of the page is controlled through the router .
Tip: The following examples are based on vue2.6.14 version, vue-router3.5.2 version, element-ui2.15.12 version.
Well, without further ado, let’s paste all the code directly
1. Create vue pages and js scripts
1. As shown in the figure below, we create a new router folder in the src directory of the project, and create an index.js file. Create a new views directory and put all our vue pages here. 2. The content of each index.vue is very simple, only one line of text
<template>
<div>view-1</div>
</template>
<script>
/* eslint-disable */
export default {
name: 'view-1',
mounted() {
},
}
</script>
3. In addition, the dependencies of package.json are also pasted together, so far you can execute npm install to install the dependent library
2. Write scripts
1. Edit the index.js file in the router directory (only the depth of the secondary directory is made here)
import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
/*
* 我们在项目中使用router.push或router.replace时，如果在A界面继续跳转A界面，就会抛出异常报错。
* 这里处理一下捕获异常的逻辑，就可以避免报错了。
*/
const originPush = VueRouter.prototype.push;
VueRouter.prototype.push = function push(location) {
return originPush.call(this, location).catch(err => err);
}
const originReplace = VueRouter.prototype.replace;
VueRouter.prototype.replace = function replace(location) {
return originReplace.call(this, location).catch(err => err);
}
const router = new VueRouter({
mode: "history",
routes: [
{
path: "/view-1",
name: "view-1",
component: {
render: e => e("router-view") }, // 这里就是将children的内容渲染到页面上
meta: {
title: 'view-1', keepAlive: true, icon: "el-icon-document-copy" },
children: [
{
path: "/view-1/view-1-1", // 这个path可以去掉 /view-1，这里只是方便知道其从属关系
name: "view-1-1",
component: () => import('@/views/view-1-1'),
meta: {
title: 'view-1-1', keepAlive: true, icon: "el-icon-film" },
},
{
path: "/view-1/view-1-2",
name: "view-1-2",
component: () => import('@/views/view-1-2'),
meta: {
title: 'view-1-2', keepAlive: true, icon: "el-icon-bank-card" },
}
],
},
{
path: "/view-2",
name: "view-2",
component: {
render: e => e("router-view") },
meta: {
title: 'view-2', keepAlive: true, icon: "el-icon-connection" },
children: [
{
path: "/view-2/view-2-1",
name: "view-2-1",
component: () => import('@/views/view-2-1'),
meta: {
title: 'view-2-1', keepAlive: true, icon: "el-icon-odometer" },
}
],
},
{
path: "/view-3",
name: "view-3",
component: () => import('@/views/view-3'),
meta: {
title: 'view-3', keepAlive: true, icon: "el-icon-truck" },
},
]
});
export default router;
2. Edit the main.js of the project
import Vue from 'vue';
import App from './App.vue';
import router from './router';
// 引入并使用element-ui
import * as element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'element-ui/lib/theme-chalk/display.css';
Vue.config.productionTip = false;
Vue.use(element);
new Vue({
render: h => h(App),
router, // 使用router
}).$mount('#app')
2. Edit App.vue of the project
<template>
<div id="app">
<el-menu
:default-active="this.$route.path"
class="el-menu-vertical-demo"
router
unique-opened
background-color="#545c64"
text-color="#fff"
active-text-color="#ffd04b"
>
<div v-for="(routeItem, routeIndex) in routes" :key="routeIndex">
<el-submenu v-if="routeItem.children && routeItem.children.length > 0" :index="routeItem.path">
<template slot="title"><i :class="routeItem.meta.icon"></i><span>{
{
routeItem.meta.title }}</span></template>
<el-menu-item
v-for="(subItem, subIndex) in routeItem.children"
:index="subItem.path"
:key="subIndex"
@click="handleShowItem(subItem)"
>
<template slot="title"><i :class="subItem.meta.icon"></i><span>{
{
subItem.meta.title }}</span></template>
</el-menu-item>
</el-submenu>
<el-menu-item v-else :index="routeItem.path" @click="handleShowItem(routeItem)">
<template slot="title"><i :class="routeItem.meta.icon"></i><span>{
{
routeItem.meta.title }}</span></template>
</el-menu-item>
</div>
</el-menu>
<router-view></router-view>
</div>
</template>
<script>
/* eslint-disable */
import router from "./router";
export default {
name: 'App',
data() {
return {
routes: [],
}
},
mounted() {
this.routes = this.getRouter();
},
methods: {
getRouter() {
// 获取router的配置信息
let {
routes = [] } = router.options;
return routes;
},
handleShowItem(item) {
// 点击导航栏，切换页面
this.$router.push({
path: item.path
})
}
},
}
</script>
<style>
#app {
height: auto;
}
</style>
Among them, if the children configured in the router do not exist, we directly use el-menu-item to display them. If the children have values, we use el-submenu to process the directory level, but in the end, we still need to use el-menu-item to display title content. In addition, we also need to add router-view , this tag will render the corresponding components in the route.
3. Run and View
We have already executed npm install , here we directly execute npm run serve to start the project, and view it, as shown in the figure below (without any style adjustments, the interface is a bit ugly):
click view-1-2 , the content of the white area below changes It becomes the content of view-1-2/index.vue .
Click view-3 , and the content of the white area below becomes the content of view-3/index.vue .
epilogue
The above content can achieve the problem shown in the title, I hope it can help you