uniapp uni-simple-router中原生tabbar用法

序言：

罪过罪过写了1年多的uni 现在才知道这个东西，可以隐藏原先uni 土土的那种跳转链接名，刚入手就遇到难题，引入uni-simple-router后 tabbar 无法跳转，找了很多篇文档也没解决，可能是我理解有问题，现在给出源码希望对大家有所帮助。

一、安装 uni-simple-router

npm install uni-simple-router@1.5.5

官网地址：https://hhyang.cn/src/router/start/quickstart.html

二、引用uni-simple-router

引用文件：main.js 中

import router from './router'
import { RouterMount } from 'uni-simple-router'

//v1.3.5起 H5端 你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
	RouterMount(app,'#app');
// #endif

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

三、文件结构（入官网毕竟刚开始接触）

router
    |--modules
    	|--home.js
    	|--user.js
    |   |--index.js
    |--index.js

注：我多添加了两home.js 和 user.js 也就是两个tabbar 首页和个人中心

文件目录：router/modules/home.js

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

文件目录：router/modules/user.js

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

文件目录：router/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

关键来了别眨眼，最外层index.js

文件目录：router/index.js

// router/index.js

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

Vue.use(Router)

const whitelist = {     //声明了一个白名单
    '/pages/index/index': 'index', // 冒号后面的 index 要对应 自己设置的 name，否则无法跳转
    '/pages/user/user': 'user',
}

//初始化
const router = new Router({
    routes: [
		...modules,
		{
			aliasPath:'/404',
			path: '/pages/test/404',
			name:'404'
		},
		{
			path: '*',
			name: 'moddle',
			redirect:to=>{
				const name = whitelist[to.path];
				if(name){
					return {name}
				};
				return {name:'404'}
			}
		}
	]//路由表
	
});

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

以上代码 复制一遍即可运行，page.json中 的路径还是原来那样一样定义，我就不多说了。

别问我是谁，我只是大自然搬运工中的一员。