+uniapp+uni-simple-router のバックアップ(No.1)

バックアップ一覧
差分を表示
現在との差分を表示
ソースを表示
+uniapp+uni-simple-router へ行く。
- 1 (2022-12-12 (月) 17:34:37)
- 2 (2022-12-12 (月) 18:19:25)
- 3 (2022-12-15 (木) 12:25:36)
- 4 (2022-12-22 (木) 18:17:15)
- 5 (2022-12-23 (金) 17:08:59)
- 6 (2022-12-23 (金) 19:32:45)
- 7 (2022-12-25 (日) 16:20:58)
- 8 (2022-12-25 (日) 17:08:01)

※前提条件：vue3 的uniapp开发

/main.js
router.js
pages.json

/main.js †[edit]

import App from './App'
import Vue from 'vue'

import {router,RouterMount} from './router/router.js'
Vue.use(router)

// #ifndef VUE3

Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
	...App
})

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

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

↑

router.js †[edit]

// router/index.js
import {
	RouterMount,
	createRouter
} from 'uni-simple-router';

const router = createRouter({
	platform: process.env.VUE_APP_PLATFORM,
	routes: [...ROUTES, {
		path: '*'
		// 不需要配置跳转路由
		// redirect:(to)=>{  
		//    return {name:'404'}  
		//}  
	}, ]
});

//全局路由前置守卫
router.beforeEach((to, from, next) => {
	//权限控制登录
	// if(to.meta.auth){
	// 	console.log("需要登录");
	// 	if("token"){
	// 		next();
	// 	}else{
	// 		console.log("请登录");
	// 	}
	// }else{
	// 	console.log("不需要登录");
	//         next();
	// }

	console.log("前置守卫" + JSON.stringify(to));
	next();

});
// 全局路由后置守卫
router.afterEach((to, from) => {
	console.log('跳转结束')
})

export {
	router,
	RouterMount
}

↑

pages.json †[edit]

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{ //首页
			"path": "pages/index/index",
			"aliasPath": "/", //对于h5端你必须在首页加上aliasPath并设置为/
			"name": "index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
                ...

Comment：