はじめに: ルータービューとNavMenuナビゲーション バーの連携は、 Webアプリケーションでは非常に一般的です。原則として、Webページが 1 つだけあるアプリケーションであるSPA (シングル ページ アプリケーション)モードを採用し、ページの更新と反復はルーターを介して制御されます。
ヒント:次の例は、 vue2.6.14バージョン、vue-router3.5.2バージョン、element-ui2.15.12バージョンに基づいています。
さて、さっそくすべてのコードを直接貼り付けてみましょう
1.vueページとjsスクリプトを作成する
1.以下の図に示すように、プロジェクトのsrcディレクトリに新しいルーターフォルダーを作成し、 index.jsファイルを作成します。新しいビューディレクトリを作成し、すべてのvueページをここに置きます。
2.各index.vueの内容は非常にシンプルで、テキストは1行のみです。
<template>
<div>view-1</div>
</template>
<script>
/* eslint-disable */
export default {
name: 'view-1',
mounted() {
},
}
</script>
3.さらに、package.jsonの依存関係も一緒に貼り付けられているので、 npm installを実行して依存ライブラリをインストールできます。
2. スクリプトを書く
1.ルーターディレクトリ内のindex.jsファイルを編集します（ここではセカンダリディレクトリの深さのみを作成します）
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.プロジェクトのmain.jsを編集する
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.プロジェクトのApp.vueを編集する
<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>
このうち、ルータに設定されている子が存在しない場合はel-menu-itemで直接表示し、子に値がある場合はel-submenuでディレクトリレベルの処理を行いますが、最終的にはタイトルの内容を表示するにはel-menu-itemを使用する必要があります。さらに、router-viewを追加する必要もあります。このタグは、ルート内の対応するコンポーネントをレンダリングします。
3. 実行して表示する
すでにnpm installを実行しています。ここでは、次の図に示すように、 npm runserve を直接実行してプロジェクトを開始し、それを表示します (スタイルを調整しないと、インターフェイスは少し見にくくなります)。view-1-2
をクリックします。下の白い部分の内容が変わり、view-1-2/index.vueの内容になります。view-3をクリックすると、下の白い部分の内容がview-3/index.vueの内容になります。
エピローグ
上記の内容でタイトルに示されている問題を解決できます。お役に立てれば幸いです。