美文网首页
vue路由爬坑(一)

vue路由爬坑(一)

作者: _花 | 来源:发表于2017-11-16 11:19 被阅读0次

我先在其他文件定义了一个路由数组,如下:

const adminRouter = [
    {path:"/admin_index",name:'后台管理',component:resolve => require(['./pages/index'], resolve),},
    {path:'/a_people',name:'人员管理',component:resolve => require(['./pages/a_people'], resolve),}
]
export default adminRouter;

然后再总的路由页面引入

import Vue from 'vue'
import VueRouter from 'vue-router';
import  adminRouter from '../his_admin/router.js'
Vue.use(VueRouter)

let constantRouterMap = [
    {path:"/",name:'首页',component:resolve => require(['../pages/PC_index'], resolve),}
]
constantRouterMap.concat(adminRouter)
// console.log(constantRouterMap.concat(adminRouter))
export default new VueRouter({
    mode: 'history',
    base:__dirname,
    routes:constantRouterMap,
})

此时当我导航到/admin_index页面,页面地址栏变了,但页面没有渲染出来;
修改为以下方法可以正常使用

let currentRouterMap = [
    {path:"/",name:'首页',component:resolve => require(['../pages/PC_index'], resolve),}
];

const Routes = currentRouterMap.concat(adminRouter)
// console.log(constantRouterMap.concat(adminRouter))
export default new VueRouter({
    mode: 'history',
    base:__dirname,
    routes:Routes,
})

或者直接修改为

let currentRouterMap = [
    {path:"/",name:'首页',component:resolve => require(['../pages/PC_index'], resolve),}
];
export default new VueRouter({
    mode: 'history',
    base:__dirname,
    routes:currentRouterMap.concat(adminRouter),
})

相关文章

  • vue路由爬坑(一)

    我先在其他文件定义了一个路由数组,如下: 然后再总的路由页面引入 此时当我导航到/admin_index页面,页面...

  • vue基于d2-admin的RBAC权限管理解决方案2019-0

    前两篇关于vue权限路由文章的填坑,说了一堆理论,是时候操作一波了。 vue权限路由实现方式总结 vue权限路由实...

  • Vue爬坑

    在这里记录一些vue开发过程中的小tips。 使用ESlint自动修复代码格式:如果使用了 ESlint ,在 p...

  • Vuex + axios

    Vue 爬坑之路(六)—— 使用 Vuex + axios 发送请求 Vue 原本有一个官方推荐的 ajax 插件...

  • Vue爬坑之路一:开发环境

    Vue作为最简单的前端框架三巨头非常适合入坑但是是个坑就需要爬所以我们记录一下爬坑之路 官网:https://cn...

  • Vue爬坑之路(一)

    安装 npm install --global vue-cli vue init webpack my-proje...

  • Vue项目中使用Echarts创建图表

    参考:Echarts官网、Vue项目中使用Echarts展示图表数据、Vue 爬坑之路(八)—— 使用 Echar...

  • Vue应用

    Vue项目 Vue结构 Vue项目打包与发布 Vue语法二 Vue网络请求 Vue路由 动态路由 编程式路由导航

  • nginx配置一个域名多个vue项目

    首先这个坑跟nginx关系不大 1. 需要配置vue-router 创建vue路由 这里 需要配置(这里用的cre...

  • Vue爬坑之旅

    1.axios赋值的问题 描述:前后数据对接,使用nuxt整合的axios,使用vue中的钩子函数在页面组件挂载完...

网友评论

      本文标题:vue路由爬坑(一)

      本文链接:https://www.haomeiwen.com/subject/yrclvxtx.html