uniapp的路由守卫

uniapp的路由守卫

前言

​ 在我们使用uniapp开发h5的时候，如果项目模块较少的情况下使用小程序原生的路由可以很方便的便于我们开发，在一些特定的需求或者模块功能较多的时候，这时候我们需要使用路由来对我们的页面进行一定的管理，这样方便我们开发，一些请求代码和判定逻辑可以写到前置守卫方便管理和维护。

安装

在uniapp里面我们可以使用uni-simple-router（1.x）来管理路由

安装：

npm install uni-simple-router
npm install uni-simple-router@1.5.5 // 也可以确定好版本

创建目录

安装好了包之后我们需要在全局创建好目录方便管理

router
    |--modules
    |   |--index.js
    |--index.js

modules的index.js书写以下内容：

// router/modules/index.js
const files = require.context('.', false, /\.js$/)
const modules = []

files.keys().forEach(key => {
  if (key === './index.js') return
  const item = files(key).default
  modules.push(...item)
})

export default modules

这是专门放置路由表模块的

在modules下面，再新建一个home.js用于编写路由的逻辑，例如：

// router/modules/home.js
const home = [
    {
      path: '/pages/index/index',
      aliasPath:'/',  // 这一段h5开发的必须加上，只需要在首次打开的页面加上即可
      name: 'index',
      // 配置路由的元信息
        meta: {
            title: '首页',
        },
    },
    // 以下的括号内容复制即可，主要注意一下就是path的路径要和小程序原生的路径要一致
    {
        path: '/pages/login/login',
        name: 'login',
    },
]
export default home

配置路由

前几步做好了之后我们需要对router下的index.js进行配置了：

// router/index.js

import modules from './modules'
import Vue from 'vue'
// 注意，如果打包报出错误没有找到uni-simple-router的话需要打开以下的注释
// import Router from 'uni-simple-router/index'
import Router from 'uni-simple-router'

Vue.use(Router)
//初始化
const router = new Router({
    routes: [...modules]//路由表
});

//全局路由前置守卫
router.beforeEach((to, from, next) => {

    // 这里可以书写逻辑

  next()
})
// 全局路由后置守卫
router.afterEach((to, from) => {
})
export default router;

引入

到这一步配置好了之后我们就需要配置到main.js上去了：

// main.js
import Vue from 'vue'
import App from './App'

// 重点是以下代码
import router from './router'
// 注意，如果打包报出错误没有找到uni-simple-router的话需要打开以下的注释，注释下下代码
// import { RouterMount } from 'uni-simple-router/index'
import { RouterMount } from 'uni-simple-router'

App.mpType = 'app'

const app = new Vue({
    ...App
})
//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
// 这一段必须加上
    RouterMount(app,'#app');
// #endif

// #ifndef H5
    app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif

使用

配置好了之后我们就可以使用常规的跳转，也可以使用uniapp的跳转了，在所有页面中使用this.$Router跳转，或者用this.$Route接收参数，在一些拦截的页面的时候使用可能出现this为undefined的情况，我们也可以直接引入router下的index.js来直接跳转：

// 跳转不了的页面，需要直接引入
import Router from '@/router'

// 使用push的方法跳转即可
Router.push({ name:'login' })