Vue-router:路由嵌套及index.js 文件拆分

原创 2018年04月17日 21:09:18

1. Vue-router

Vue-router 是为了配合Vue.js 构建单页面应用而存在的,在使用方面,我们需要做的是,将组件映射到路由,然后告诉Vue-router 在哪里渲染它们。具体教程请移步:https://router.vuejs.org/zh-cn/essentials/getting-started.html. 因为文档中对于嵌套路由的描述不是特别契合应用场景,所以这里重新梳理一番,并对router文件夹下的index.js 文件进行拆分,实现简单的功能解耦。

2. 路由和路由嵌套

路由的意义就在于我们可以保持页面一部分固定而只改变页面的剩余部分,路由嵌套的存在则是因为我们需要根据应用场景提供不同粒度的路由,听起来有点抽象,直接来看图。


以上图为例,三个颜色的框分别代表了三个不同粒度的路由(三层路由嵌套)。红色框存在的原因是需要区分是登录页面,还是操作页面。绿色框的存在是因为不同管理模块的左边菜单栏内容和按钮不一致,所以这一块也需要是可变的。黄色框则是在一个管理模块内根据不同的菜单选择而展现不同的内容。

3. 怎么实现路由嵌套

3.1 入口文件(App.vue)

因为需要三层嵌套路由,最外层路由的大小是整个页面,所以网站的入口文件是一个只包含router-view 的div

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

<script>
export default {
  name: 'App'
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
html,body
  width 100%
  height 100%
#app
  width 100%
  height 100%
  font-family 'Avenir', Helvetica, Arial, sans-serif
  -webkit-font-smoothing antialiased
  -moz-osx-font-smoothing grayscale
  color #2c3e50
</style>

3.2 二级路由(Main.vue)

二级路由是除了顶部导航栏以外的部分,只有顶部导航栏是固定的,其他部分都是可变的。

<template>
  <div class="main">
    <NavBar></NavBar>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Main'
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
</style>

3.3 三级路由(不同模块的左边菜单栏可以是不同的)

三级路由在二级路由的基础上再固定左边菜单栏。此时,顶部导航栏和左边菜单栏都是固定的,剩余内容是可变的。

<template>
  <div>
    <SideBar :sideBar="sideBar"></SideBar>
    <router-view></router-view>
  </div>
</template>

<script type="text/ecmascript-6">
import sbJson from '@/assets/json/SideBarJson.json'

export default {
  name: 'EmployeeManagement',
  data () {
    return {
      sideBar: {
        options: sbJson.employee
      }
    }
  }
}
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../assets/css/commonCss.styl"
</style>

3.4 router文件夹下的index.js 写法

main.js 写法就不贴了,保持跟官方一直即可。index.js 写法如下所示:

  • 引入各级路由页面或组件
import Main from '../Main.vue'
import Login from '../login.vue'

// user management
import WholeManagement from '@/pages/UserManagement/WholeManagement/WholeManagement'
// 以下省略很多组件
  • 创建新的VueRouter 对象,按照以下写法,当路由为/user/condition 时就会访问到WholeManagement 页面了,当然也可以继续进行更深层次的嵌套。
const router = new VueRouter({
  routes: [
    {
      path: '/user',
      name: 'user',
      title: '老人管理',
      meta: {
        title: '老人管理'
      },
      component: Main,
      children: [
        {
          path: 'condition',
          name: 'WholeManagement',
          meta: {
            title: '老人情况一览'
          },
          title: '情况一览',
          component: WholeManagement
        }
      ]
    }
  ]
})

4. 如何将index.js 拆分

如果页面比较多的话,路由文件内容会很多,有时除了路由以外还需要在index.js 中添加部分逻辑。这时还是将路由跟跟逻辑分开写更清晰一点。于是index.js 被拆分成index.js 和router.js 两个文件,router.js 中存放路由,index.js 中存放逻辑。

  • router.js
import Main from '../Main.vue'
import Login from '../login.vue'

// user management
import WholeManagement from '@/pages/UserManagement/WholeManagement/WholeManagement'
// import a lot of vue files

// 登录页面单独写,如下
export const loginRouter = {
  path: '/login',
  name: 'login',
  meta: {
    title: 'Login - 登录'
  },
  component: Login
}

// 作为Main组件的子页面展示并且在左侧菜单显示的路由写在appRouter里
export const appRouter = [
  // 默认页面
  {
    path: '/',
    redirect: '/user/condition'
  },
  // 老人管理
  {
    path: '/user',
    name: 'user',
    title: '老人管理',
    meta: {
      title: '老人管理'
    },
    component: Main,
    children: [
      {
        path: 'condition',
        name: 'WholeManagement',
        meta: {
          title: '老人情况一览'
        },
        title: '情况一览',
        component: WholeManagement
      },
      // ......
    ]
  },
  // 物资管理
  {
    path: '/material',
    name: '',
    component: Main,
    children: [
      {
        path: '',
        name: 'material',
        component: MaterialManagement,
        children: [
          {
            path: 'drug/list',
            name: 'DrugList',
            meta: {
              title: '药品列表'
            },
            component: DrugList
          },
          // ......
        ]
      }
    ]
  },
  // ......
]

// 所有上面定义的路由都要写在下面的routers里
export const routers = [
  loginRouter,
  ...appRouter
  // ......
]
  • index.js
import Vue from 'vue'
import { routers } from './router'
import VueRouter from 'vue-router'

// 使用VueRouter
Vue.use(VueRouter)

// 路由配置
const RouterConfig = {
  routes: routers
}

// 创建VueRouter 实例
export const router = new VueRouter(RouterConfig)

// 设置页面title
router.beforeEach((to, from, next) => {
  /* 路由发生变化修改页面title */
  if (to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

Vue--router-->>项目多路由嵌套--常用

html> html lang="en"> head> meta charset="UTF-8"> title>vue-routertitle> link rel="style...
  • guohao326
  • guohao326
  • 2017-05-31 19:33:56
  • 2273

vue-router嵌套路由详解

嵌套路由顾名思义就是路由的多层嵌套。 结合vue-router仿天猫底部导航栏,给组件Me添加嵌套路由,也叫子路由。 总共添加两个子路由,分别命名Collection.vue(我的收藏)和Trac...
  • wlangmood
  • wlangmood
  • 2017-10-18 10:20:19
  • 2089

vue-router: 嵌套路由

模板抽离我们已经学习过了Vue模板的另外定义形式,使用。 首页 新闻 然后js里定义路...
  • github_26672553
  • github_26672553
  • 2017-02-04 10:14:24
  • 35101

Vue.js结合vue-router和webpack编写单页路由项目

一、前提 1. 安装了node.js 2. 安装了npm 3. 检查是否安装成功: 打开cmd,输入node,没有报“node不是内部或外部命令”表示安装成功node.js。 打开cmd,输入npm,...
  • zwcwu31
  • zwcwu31
  • 2016-09-12 14:09:27
  • 3063

Vue-router嵌套路由的使用

路由使用的时候需要设置路由的路径: ew Router({ // mode: 'abstract', routes: [ { path: '/top', component: Top...
  • a641832648
  • a641832648
  • 2017-03-21 16:59:45
  • 4096

vue router学习——动态路由和嵌套路由

vue router学习——动态路由和嵌套路由 本文主要参考: https://router.vuejs.org/zh-cn/essentials/nested-routes.html ...
  • wild46cat
  • wild46cat
  • 2017-08-07 06:52:20
  • 6158

Vue 之 vue-router 路由嵌套不显示问题

Vue 之 vue-router 路由嵌套1、路由嵌套,vue2.0 router中嵌套路由不成功我先说下我的需求,例如下图我本来是想打算将中间的模块做一层子路由(test模块),模块代码没错,每...
  • qq_16559905
  • qq_16559905
  • 2017-03-12 19:29:51
  • 7715

windows下vue-cli及webpack 构建网站(四) 路由vue-router的使用

windows下vue-cli及webpack 构建网站(一)环境安装  windows下vue-cli及webpack 构建网站(二)导入bootstrap样式 windows下vue-cli...
  • ansu2009
  • ansu2009
  • 2016-11-24 15:32:11
  • 5822

vue-router中定义动态路由、嵌套路由,并动态获取参数

路由的定义,主要有以下几步: 如果是模块化机制,需要调用 Vue.use(VueRouter) 定义路由组件,如: const Foo = { template: '&amp;lt;div...
  • weixin_41399785
  • weixin_41399785
  • 2018-02-26 20:25:00
  • 487

vue-router 路由 iframe嵌套

功能点: 使用vue-router.js 实现路由功能,简单路由参数设置。 在iframe里展示自定义链接内容(url地址或者加载路由地址)测试。 监听属性变化功能。 ...
  • elisunli
  • elisunli
  • 2018-01-12 15:11:25
  • 965
收藏助手
不良信息举报
您举报文章:Vue-router:路由嵌套及index.js 文件拆分
举报原因:
原因补充:

(最多只允许输入30个字)