1. 写在前面

关于vue框架API,使用,全家桶等有很多博客可供参考,写的很详细很好。这里写一些小编自己的经验,和其他博客不一样的,仅供参考。
1. vue 官网,你可以去此查看官方文档和API
2. 关于 vue 的博客专栏
3. 前端框架 Vue 初体验 @JesusAllen30

关于 vue-router 的相关文档:
1. vue-router 官方文档
2. 网上很多优秀的教程,请自行百度。
3. 项目demo代码。github

2 路由按模块配置

通常我们将路由写在 /src/router/index.js 文件中,需要配置的路由太多,该文件就变成很长,不利于维护。如下图
这里写图片描述
这里写图片描述
能不能按照模块来分隔路由,像下图所示。
这里写图片描述
这里写图片描述

2.1 使用ES6扩展运算符,分割路由

1./src/router/ 下新建 person.js,error.js
2.将个人中心功能相关的路由配置,写在 person.js 中。

// 个人中心,相关路由规则
export default [
  {
    path: '/person',
    component: resolve => require(['@/module/layout/index'], resolve),
    children: [
      {
        path: '/',
        redirect: 'index'
      },
      {
        path: 'index',
        name: 'personIndex',
        meta: {
          title: '个人中心',
          requiresAuth: true
        },
        component: resolve => require(['@/module/person/index'], resolve)
      }
    ]
  }
]

3.将错误页面相关的路由配置,写在 error.js 中。

export default [
  {
    path: '/404',
    meta: {
      title: '页面不存在',
      requiresAuth: false
    },
    component: resolve => require(['@/module/error/404'], resolve)
  },
  {
    path: '/noAuth',
    meta: {
      title: '无权限',
      requiresAuth: false
    },
    component: resolve => require(['@/module/error/noAuth'], resolve)
  },
  {
    path: '*',
    redirect: '/404'
  }
]

4.修改 /src/router/index.js 文件。

import Vue from 'vue'
import Router from 'vue-router'
// 个人中心模块路由
import person from './person'
// 错误页面
import error from './error'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    ...person,
    // 404,500 错误页面
    ...error
  ]
})

5.这样 /src/router/index.js 页面更简洁。
这里写图片描述

2.2 路由懒加载

很多教程都没有提到懒加载,小编觉得这同样很重要,提一嘴。
1. 当打包构建应用时,Javascript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
2. 结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
3. 懒加载,官方文档
4. 懒加载在 js 中写法,如上面截图中 component 的引入。

path: 'index',
name: 'personIndex',
meta: {
  title: '个人中心',
  requiresAuth: true
},
// 懒加载 *.vue文件
component: resolve => require(['@/module/person/index'], resolve)

2.3 修改页面的 title

由于是单页面, 页面title<title>vue-demo</title> 写在 /index.html 文件中,每个页面的title应该是不一样,动态加载的,这里用到 路由导航守卫
1. 在/router/*.js定义路由时,加上 meta.title 属性。

// router/person.js文件
path: 'index',
name: 'personIndex',
// 定义页面的title
meta: {
  title: '个人中心'
},
// 懒加载 *.vue文件
component: resolve => require(['@/module/person/index'], resolve)
  1. /src/main.js 中,定义前置守卫
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// router
import router from './router/index'

Vue.config.productionTip = false

// 路由导航守卫
router.beforeEach((to, from, next) => {
  // 更改页面 title
  if (to.meta.title) {
    document.title = to.meta.title
  } else {
    document.title = 'my-menu'
  }
  next()
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  template: '<App/>',
  components: { App }
})
  1. 其实导航守卫可以做更多的事情,比如判断登录状态或权限进行拦截页面等。

3. 未完待续…

Logo

前往低代码交流专区

更多推荐