要在uniapp中使用路由守衛(wèi)，uniapp原生的api是比較欠缺的，所以要用‘uni-simple-router’插件包

安裝?

// 項目根目錄執(zhí)行命令行
npm install uni-simple-router
// 根據(jù)pages.json總的頁面，自動構(gòu)建路由表
npm install uni-read-pages

配置vue.config.js

注：如果根目錄沒有vue.config.js文件，要手動創(chuàng)建

// 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)
			})
		]
	}
}

在router文件夾?下對應(yīng)的 js文件 中寫如下代碼

import { RouterMount, createRouter } from 'uni-simple-router';
 
const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,
	routes: [...ROUTES]
});
//全局路由前置守衛(wèi)
router.beforeEach((to, from, next) => {
//權(quán)限控制登錄
	if(to.meta.auth){
		console.log("需要登錄");
		if("token"){
			next();
		}else{
			console.log("請登錄");
		}
	}else{
		console.log("不需要登錄");
         next();
	}
	
	console.log("前置守衛(wèi)"+JSON.stringify(to));
	
});
// 全局路由后置守衛(wèi)
router.afterEach((to, from) => {
	console.log('跳轉(zhuǎn)結(jié)束')
})
 
export {
	router,
	RouterMount
}

main.js

import {router,RouterMount} from './router/router.js'  //路徑換成自己的
Vue.use(router)
 
 
//v1.3.5起 H5端 你應(yīng)該去除原有的app.$mount();使用路由自帶的渲染方式
// #ifdef H5
	RouterMount(app,router,'#app')
// #endif
 
// #ifndef H5
	app.$mount(); //為了兼容小程序及app端必須這樣寫才有效果
// #endif

??page.json

{
	"pages": [ //pages數(shù)組中第一項表示應(yīng)用啟動頁，參考：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, //需要登錄
				"async": true, //是否同步
				"title": "首頁", //標(biāo)題
				"group": "商城" //分組
			},
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}
 
		},{
			"path": "pages/haha/haha",
			"name": "haha",
			"meta": {
				"auth": true, //需要登錄
				"async": true, //是否同步
				"title": "首頁", //標(biāo)題
				"group": "商城" //分組
			},
			"style": {
				"navigationBarTitleText": "",
				"enablePullDownRefresh": false
			}
 
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

??頁面跳轉(zhuǎn)和參數(shù)接收

• push()
• pushTab()?: 跳轉(zhuǎn)tar欄
• replace()?: 替換
• replaceAll()?： 替換所有
• back()?: 直接帶上數(shù)字返回第幾層
• 注意：path和query配合使用，而name和params配合使用

//通過name方式跳轉(zhuǎn)
this.$Router.push({
					name: 'home',
					params: {
						name: 'Joseph',
						age: 22
					}
				})
 
------------------------------------
//通過path形式進行跳轉(zhuǎn)
this.$Router.push({
					 path: '/pages/haha/haha',
					    query: {
					        name: 'Josdep33333h',
					        age: 24
					    }
				})
-------------------------------------
//用uni形式跳轉(zhuǎn)到新頁面,并傳遞參數(shù)
uni.navigateTo({
					url:'/pages/home/home?id=2&name=Josep33333h'
				});

?獲取參數(shù)

	onLoad(option) {
			//原生獲取數(shù)據(jù)
				console.log("zz",option);
			// query傳參
			    const query=this.$Route.query
				console.log(query);
			    // params傳參
			    const params=this.$Route.params
				console.log(params);
		}

?文章來源地址http://www.zghlxwxcb.cn/news/detail-421662.html

到了這里，關(guān)于uniapp路由—— uni-simple-router的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！