快捷導(dǎo)航

vue使用路由router-view的詳細(xì)代碼

更新時(shí)間：2023年12月06日 14:39:33 作者：知之、行之、思之

這篇文章主要介紹了vue使用路由router-view的相關(guān)知識(shí),其原理就是采用?SPA(single-page-application)?模式,就是只有一個(gè)?Web?頁(yè)面的應(yīng)用,通過(guò)?router?來(lái)控制頁(yè)面的刷新和迭代,感興趣的朋友一起看看吧

前言： router-view 與 NavMenu 導(dǎo)航欄的配合，在 web 應(yīng)用中極為常見(jiàn)。其原理就是采用 SPA(single-page-application) 模式，就是只有一個(gè) Web 頁(yè)面的應(yīng)用，通過(guò) router 來(lái)控制頁(yè)面的刷新和迭代。

提示： 以下示例基于 vue2.6.14 版本，vue-router3.5.2 版本，element-ui2.15.12 版本。
好了，廢話不多說(shuō)，我們直接貼上全部代碼

一、創(chuàng)建vue頁(yè)面與js腳本

1、 如下圖，我們?cè)陧?xiàng)目的 src 目錄里，新建 router 文件夾，并創(chuàng)建 index.js 文件。新建 views 目錄，并把我們的 vue 頁(yè)面全部放在這里。

2、其中每個(gè) index.vue 的內(nèi)容都很簡(jiǎn)單，只有一行文字

<template>
  <div>view-1</div>
</template>
<script>
/* eslint-disable */
export default {
  name: 'view-1',
  mounted() {
  },
}
</script>

3、 另外 package.json 的依賴關(guān)系也一并貼上，至此可以執(zhí)行 npm install 來(lái)安裝依賴庫(kù)

二、編寫腳本

1、編輯router目錄的index.js文件 (這里只做了二級(jí)目錄的深度)

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);
/*
* 我們?cè)陧?xiàng)目中使用router.push或router.replace時(shí)，如果在A界面繼續(xù)跳轉(zhuǎn)A界面，就會(huì)拋出異常報(bào)錯(cuò)。
* 這里處理一下捕獲異常的邏輯，就可以避免報(bào)錯(cuò)了。
*/
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的內(nèi)容渲染到頁(yè)面上
      meta: { title: 'view-1', keepAlive: true, icon: "el-icon-document-copy" },
      children: [
        {
          path: "/view-1/view-1-1", // 這個(gè)path可以去掉 /view-1，這里只是方便知道其從屬關(guān)系
          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、編輯項(xiàng)目的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')

3、編輯項(xiàng)目的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) {
      // 點(diǎn)擊導(dǎo)航欄，切換頁(yè)面
      this.$router.push({
        path: item.path
      })
    }
  },
}
</script>
<style>
#app {
  height: auto;
}
</style>

其中，如果 router 里配置的 children 不存在，我們直接使用 el-menu-item 來(lái)顯示，如果 children 有值，就使用 el-submenu 來(lái)處理目錄級(jí)別，但其最終還是要用 el-menu-item 來(lái)顯示標(biāo)題內(nèi)容。另外，我們還要加上 router-view，這個(gè)標(biāo)簽才會(huì)把路由里對(duì)應(yīng)的組件渲染出來(lái)。

三、運(yùn)行與查看

我們已經(jīng)執(zhí)行過(guò)了 npm install 了，這里直接執(zhí)行 npm run serve 啟動(dòng)項(xiàng)目，并查看，如下圖(沒(méi)有做任何的樣式調(diào)整，界面有些不好看)：
點(diǎn)擊 view-1-2，下方白色區(qū)域的內(nèi)容變成了 view-1-2/index.vue 的內(nèi)容。