uniapp中的一个完全相似Vue-router的路由插件

本人小白，干这一行时间还短，出现什么问题望大佬指正。
这篇文章是结合文档然后加入自己的部分理解。
uni-simple-router
一个更为简洁的Vue-router，专为 uni-app 量身打造
插件作者： [email protected]
插件文档：插件文档地址
文档镇楼
1.引入
三种引用方式
第一种 npm安装
项目根目录命令行执行

npm install uni-simple-router

第二种插件市场（使用HBuilderX导入插件）

第三种 ZIP下载解压

2.项目中引入

import Vue from 'vue'
import {RouterMount} from 'uni-simple-router';
import Router from './router'
Vue.use(Router)
//...后续代码

引入之后就开始我们的正式使用。
第一步先在项目的根目录下创建一个router文件夹。
格式为：

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

router中的modules文件夹是用来放路由表模板的。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

这个文件用来把同目录下的js文件读取并整合所有路由。
在这里创建的js文件代码示例：

const home = [
	{
        //注意：path必须跟pages.json中的地址对应，最前面别忘了加'/'哦
      path: '/pages/home/index',
      aliasPath:'/',  //对于h5端你必须在首页加上aliasPath并设置为/
      name: 'index',
        meta: {
	        title: '首页',
	    },
    },
    {
	    path: '/pages/home/list',
        name: 'list',
        meta: {
	        title: '列表',
	    },
	},
]
export default home

第二步配置router下的index.js

import modules from './modules'
import Vue from 'vue'
//这里仅示范npm安装方式的引入，其它方式引入请看最上面【安装】部分
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

import Vue from 'vue'
import App from './App'
import router from './router'
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

这样你的路由就配置好了。

如果不想繁琐的配置modules下的文件，可以用webpack自动构建路由表

安装

npm install uni-read-pages

配置 vue.config.js （可能需要手动创建）

const TransformPages = require('uni-read-pages')
const tfPages = new TransformPages({
//如果你需要获取更多参数，那么请配置参数！
	includes:['path','name','meta']
})
module.exports = {
    configureWebpack: {
        plugins: [
            new tfPages.webpack.DefinePlugin({
                ROUTES: JSON.stringify(tfPages.routes)
            })
        ]
    }
}

然后去pages.json里面更改配置，加入所需要的内容
最后配置路由表

import Vue from 'vue'
//这里仅示范npm安装方式的引入，其它方式引入请看最上面【安装】部分
import Router from 'uni-simple-router'

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

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

最后，在配置完成以后

一定要重新编译运行，
一定要重新编译运行，
一定要重新编译运行，
我刚弄完然后直接刷新的页面，然后出了一堆问题，感觉是因为没有重新运行的原因。当然也有可能是玄学。。。。。。。。。

北栀丶

发布了3 篇原创文章 · 获赞 4 · 访问量 198

私信关注