Uniapp routing uni simple router

background

• Specially designed for uniapp Create a new router , and uniapp Deep integration
• General configuration applet 、App and H5 End
• H5 Can fully use vue-router Development
• modularization 、 Inquire about 、 wildcard 、 Routing parameters
• send uni-app Implement nested routing （ only H5 The end is fully used vue-router）
• uniapp Used a lot of vue Of api, But the function of routing management is relative to vue-router It is still lacking , Such as global navigation guard

install  

//  Project root execute command line 
npm install uni-simple-router
//  according to pages.json The total page , Automatically build routing tables 
npm install uni-read-pages

  To configure vue.config.js

notes ： If the root does not have vue.config.js file , Please create it manually

// vue.config.js
const TransformPages = require('uni-read-pages')
const { webpack } = new TransformPages()
module.exports = {
	configureWebpack: {
		plugins: [
			new webpack.DefinePlugin({
				ROUTES: webpack.DefinePlugin.runtimeValue(() => {
					const tfPages = new TransformPages({
						includes: ['path', 'name', 'aliasPath','meta']
					});
					return JSON.stringify(tfPages.routes)
				}, true)
			})
		]
	}
}

  newly build router.js file

import { RouterMount, createRouter } from 'uni-simple-router';

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,
	routes: [...ROUTES]
});
// Global routing front guard 
router.beforeEach((to, from, next) => {
// Permission control login 
	if(to.meta.auth){
		console.log(" Need to log in ");
		if("token"){
			next();
		}else{
			console.log(" Please log in ");
		}
	}else{
		console.log(" You don't need to log in ");
         next();
	}
	
	console.log(" Front guard "+JSON.stringify(to));
	
});
//  Global route post guard 
router.afterEach((to, from) => {
	console.log(' Jump end ')
})

export {
	router,
	RouterMount
}

main.js

import {router,RouterMount} from './router/router.js'  // Change the path to your own 
Vue.use(router)
 

//v1.3.5 rise  H5 End   You should remove the original app.$mount(); Use the rendering method provided by the route 
// #ifdef H5
	RouterMount(app,router,'#app')
// #endif

// #ifndef H5
	app.$mount(); // For compatibility with applets and app The end must be written in this way to be effective 
// #endif

 page.json

{
	"pages": [ //pages The first item in the array represents the application startup page , Reference resources ：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"name": "index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}, {
			"path": "pages/home/home",
			"name": "home",
			"meta": {
				"auth": false, // Need to log in 
				"async": true, // Is it synchronized 
				"title": " home page ", // title 
				"group": " Shopping Mall " // grouping 
			},
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}

		},{
			"path": "pages/haha/haha",
			"name": "haha",
			"meta": {
				"auth": true, // Need to log in 
				"async": true, // Is it synchronized 
				"title": " home page ", // title 
				"group": " Shopping Mall " // grouping 
			},
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}

		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

  Page Jump and parameter reception

• push()
• pushTab() : Jump tar bar
• replace() : Replace
• replaceAll() ： Replace all
• back() : Take the number directly and return to the layer
• Be careful ：path and query In combination with , and name and params In combination with

// adopt name Way to jump 
this.$Router.push({
					name: 'home',
					params: {
						name: 'Joseph',
						age: 22
					}
				})

------------------------------------
// adopt path Form to jump 
this.$Router.push({
					 path: '/pages/haha/haha',
					    query: {
					        name: 'Josdep33333h',
					        age: 24
					    }
				})
-------------------------------------
// use uni Form jump to new page , And pass the parameters 
uni.navigateTo({
					url:'/pages/home/home?id=2&name=Josep33333h'
				});

//  Page receive parameters ——query Parameters in 
onLoad(){
    // query The ginseng 
    const query=this.$Route.query
    // params The ginseng 
    const params=this.$Route.params
}

Components

//  First, in the main.js Register in , take my-link Register as a global component , Use the same method after registration <router-link>
import Mylink from './node_modules/uni-simple-router/dist/link.vue'     
Vue.component('my-link',Mylink)


//  Use 
// navType The corresponding is push/pushTab/replace/replaceAll
<my-link to="{path: '/pages/mine/index',query: {name: ' I just want to go tab5 Of my-link'}}" navType="pushTab">
    <button type="default"> I am a router-link</button>
</my-link>

	onLoad(option) {
			// Get data natively 
				console.log("zz",option);
			// query The ginseng 
			    const query=this.$Route.query
				console.log(query);
			    // params The ginseng 
			    const params=this.$Route.params
				console.log(params);
		}

For details, please refer to

uni-simple-router - xsk-walter - Blog Garden