在Vue當中同時配置多個路由文件的方法案例代碼

更新時間：2022年12月14日 10:18:05 作者：編程聯盟

這篇文章主要介紹了在Vue當中同時配置多個路由文件的方法,包含具體代碼，本文分步驟結合示例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下

在Vue當中同時配置多個路由文件的方法

在vue的開發(fā)中，我們如果頁面很多的話就需要配置很多個路由地址，如果都放到一個文件當中的話，未免顯著很亂。這個時候我們就會想到將路由配置文件分開，比如在router目錄下新建index.js和admin.js，這樣的話可以將前后臺路由文件分開配置，這樣前后臺清晰明了。具體方法如下：
在路由配置目錄下有兩個路由配置文件，如下圖：

在這里插入圖片描述

我的router目錄下有兩個路由配置文件，一個admin.js，專門用來配置后臺路由地址，一個是app.js，用來配置前臺路由地址。

【第一步】從配置文件admin.js中的代碼為：

const AdminIndex= () => import('../pages/admin/Index.vue') //此處的配置和app.js中的配置一樣。
const admin = [
    { //此處的配置和app.js中的配置一樣。
        path:'/admin_index',
        component:AdminIndex
    }
];
    export default admin;//重點是要在這里導出，不然沒效果。

直接復制我的代碼修改即可。

注意，在admin.js配置文件中不要加入其他的，他只是一個數組而已。不要加入如下代碼：

import Vue from 'vue'
import vueRouter from 'vue-router'
import admin from './admin'

此處省了500字,這個這些代碼都不要放到admin.js中
const router = new vueRouter({
        routes,
        mode:'history',
        base: process.env.BASE_URL
    });

    const originalPush = vueRouter.prototype.push
    vueRouter.prototype.push = function push(location) {
      return originalPush.call(this, location).catch(err => err)

    };

【第二步】在app.js配置文件中的代碼中將admin.js中的admin導入進來，加入如下代碼：

import Vue from 'vue'
import vueRouter from 'vue-router'
import admin from './admin'  //重點是這行代碼

接下來在配置的路由地址數組中添加如下一點代碼：

import Vue from 'vue'
import vueRouter from 'vue-router'
import admin from './admin'  //重點是這行代碼

到此，多文件配置搞定，在admin.js中配置好直接訪問相關地址即可。

到此這篇關于在Vue當中同時配置多個路由文件的方法的文章就介紹到這了,更多相關Vue配置多個路由文件內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

在Vue當中同時配置多個路由文件的方法案例代碼

在Vue當中同時配置多個路由文件的方法

相關文章

最新評論

大家感興趣的內容

最近更新的內容

常用在線小工具