Vue路由分模块 与 子路由嵌套,

路由模块化

创建文件路径如下：

路由模块化思路

/**
*
* 还是导入导出那一套,首先新建语义化的文件,在js文件中导出export default { //路径 }
* 在main.js引入,将引入的变量写在路由里const routes = [ ]
*
*/

新建文件后 内容如下方

my.js

/**
 * 登录分模块路由。
 */
export default {
    path: '/myLogin',
    name: '',
    component: () =>
        import ('../views/myLogin.vue')
}

user.js

/**
 * 用户子路由模块
 */
export default {
    path: '/user',
    name: '',
    component: () =>
        import ('../views/user.vue')
}

当然views也要创建相同文件

内容写完后在main.js引入

router.index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
/**
* 引入路由分模块
*/
import user from './user'
import my from './my'
Vue.use(VueRouter)

以上配置路由分模块已完成

如果配置子路由嵌套则

思路:

views/index.vue

/**
*
* app.vue不要写tabber,新建一个index文件在里面写,有tabber的页面,
* index.vue有<router-view />下面有tabber,是一级路由,经过app.vue,但是app.vue没有tabber,只有
*<router-view />,所以经过APP没有tabber,经过index有tabber,我们将有tabber的页面写入index的子路由
*index.vue没有tabber,但它里面的子路由有tabber
*
*/

<template>
  <div id="">
    <router-view></router-view>
    <van-tabbar v-model="active" route>
      <van-tabbar-item to="/home"  icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/myLogin" icon="search">我的登录</van-tabbar-item>
      <van-tabbar-item to="/user" icon="friends-o">用户</van-tabbar-item>
      <van-tabbar-item to="/about" icon="setting-o">关于</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

//app.vue

<template>
  <div id="app">
    <div id="nav">
      
    </div>
    <router-view/>
  </div>
</template>

//router/index.js


import Vue from 'vue'
import VueRouter from 'vue-router'
import user from './user'
import my from './my'
Vue.use(VueRouter)

// 重写 router push 方法， 解决编程式路由往同一地址跳转时会报错的情况
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location, onResolve, onReject) {
    if (onResolve || onReject) return originalPush.call(this, location, onResolve, onReject)
    return originalPush.call(this, location).catch(err => err)
}

const routes = [
    // 经过app.vue,没有tabber
    // 过index有tabber,过app没有tabber,
    //新建一个index里面写tabber和坑,app不写tabber,因为app.vue是单例
    //还有一种就是将tabber固定定位提高层级
    {
        path: "/",
        redirect: '/home', // 重定向:重新指向其它path,会改变网址
    },

    {
        path: '/index',
        name: '',
        component: () =>
            import ('../views/index.vue'),
        children: [{
                path: '/home',
                name: '', //name是跳转时用params的跳转名字不加/,params跳转的方式,地址栏不显示
                component: () =>
                    import ('../views/home.vue')
            },
            {
                path: '/about',
                name: '',
                component: () =>
                    import ('../views/about.vue')
            },
            my
        ]
    },
    user,

]

const router = new VueRouter({
    routes
})

export default router