路由模块化

创建文件路径如下：

路由模块化思路

/**
*
* 还是导入导出那一套,首先新建语义化的文件,在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>