uniapp H5使用uni-simple-router完全使用vue-router开发

因为业务需要，我使用uniapp需要达到底部的导航栏动态变化，并且底部导航栏要一直都在，所以打算使用

这种结构来满足需求，所以就要使用相当于vue-router这样的路由机制来实现功能

1、步骤

具体可以参考官网链接

注意： 我这里使用的是1.x版本的

1.1 npm安装

npm install uni-simple-router@1.5.5

1.2 效果

用动态图展示，这里我没有使用tabbar，但是把下面的page1换成tabbar就实现了需求

1.3 直接上代码吧，简单明了

先看项目截图

上面画了箭头的都是比较重要的

1.3.1 先看vue.config.js

这个js文件是固定的

module.exports = {
    transpileDependencies:['uni-simple-router']
}

1.3.2 App.vue文件

注意里面的router-view是不能去掉的-

//router1.vue
<template>
    <div>
<!--        注意这个router-view是不能去掉的-->
        <router-view></router-view> 
    </div>
</template>
<script>
	export default {
		onLaunch: function() {
			console.log('App Launch')
		},
		onShow: function() {
			console.log('App Show')
		},
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
</style>

1.3.3 router目录

router目录下面的index.js差不多也是不需要改变的
里面的console.log可以去掉

// 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({
    h5: {
        vueRouterDev:true,  //完全使用vue-router开发 默认 false
        useUniConfig:false
    },
    routes: [...modules]//路由表
});

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

router/modules/index.js文件也是固定的，作用就是将modules目录下的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

router/modules/home.js文件就是自己写的了，我这里使用的是懒加载

// router/modules/home.js
const home = [
    {
        //注意：path必须跟pages.json中的地址对应，最前面别忘了加'/'哦
        path: '/',
        // aliasPath:'/pages/index/index',  //对于h5端你必须在首页加上aliasPath并设置为/
        component: () => import('@/pages/index/index.vue'),
        name: 'index',
        children:[
            {
                path:'index2',
                name:'children1',
                component:() => import('@/pages/index/index2.vue'),
            },
            {
                path:'index3',
                name:'children2',
                component:() => import('@/pages/index/index3.vue'),
            }
        ]
    }
]
export default home

1.3.4 其它目录文件

比较重要的就是index.vue了，相当于加载程序第一个进入的页面

<template>
	<view class="content">
		page1
		<router-view></router-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {
			console.log(this.$Route)
		},
		methods: {

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin: 200rpx auto 50rpx auto;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>

2、注意点

注意pages.json中一定要指定一个vue文件，我这里指定的是index.vue文件，这个文件是我最开始进入的目录

如果觉得有用，各位观众老爷点个赞再走哈~谢谢(其实再加个关注也不介意哈哈哈)