uniapp路由uni-simple-router使用示例

正文

要在uniapp中使用路由守卫，uniapp原生的api是比较欠缺的，所以要用‘uni-simple-router’插件包

安装

// 项目根目录执行命令行下载稳定版本
npm install uni-simple-router@2.0.7
// 根据https://www.u-9.cn/wp-content/uploads/2023/12/2023120111500696.pages.json总的页面，自动构建路由表
npm install uni-read-https://www.u-9.cn/wp-content/uploads/2023/12/2023120111500696.pages

配置

vue.config.js

注：如果根目录没有vue.config.js文件，要手动创建

// vue.config.js
const TransformPages = require(\’uni-read-https://www.u-9.cn/wp-content/uploads/2023/12/2023120111500696.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文件夹下对应的 js文件

写如下代码

import { RouterMount, createRouter } from \’uni-simple-router\’;
const router = createRouter({
platform: process.env.VUE_APP_PLATFORM,
routes: […ROUTES]
});
//全局路由前置守卫
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));
});
// 全局路由后置守卫
router.afterEach((to, from) => {
console.log(\’跳转结束\’)
})
export {
router,
RouterMount
}

main.js

import {router,RouterMount} from \’./router/router.js\’ //路径换成自己的
Vue.use(router)
//v1.3.5起 H5端你应该去除原有的app.$mount();使用路由自带的渲染方式
// #ifdef H5
RouterMount(app,router,\’#app\’)
// #endif
// #ifndef H5
app.$mount(); //为了兼容小程序及app端必须这样写才有效果
// #endif

page.json

\”https://www.u-9.cn/wp-content/uploads/2023/12/2023120111500696.pages\”: [ //https://www.u-9.cn/wp-content/uploads/2023/12/2023120111500696.pages数组中第一项表示应用启动页，参考：wp-content/uploads/2023/12/https://www.u-9.cn/wp-content/uploads/2023/12/2023120111500696.pages
{
\”path\”: \”https://www.u-9.cn/wp-content/uploads/2023/12/2023120111500696.pages/index/index\”,
\”name\”: \”index\”,
\”style\”: {
\”navigationBarTitleText\”: \”uni-app\”
}
}, {
\”path\”: \”https://www.u-9.cn/wp-content/uploads/2023/12/2023120111500696.pages/home/home\”,
\”name\”: \”home\”,
\”meta\”: {
\”auth\”: false, //需要登录
\”async\”: true, //是否同步
\”title\”: \”首页\”, //标题
\”group\”: \”商城\” //分组
},
\”style\”: {
\”navigationBarTitleText\”: \”\”,
\”enablePullDownRefresh\”: false
}
},{
\”path\”: \”https://www.u-9.cn/wp-content/uploads/2023/12/2023120111500696.pages/haha/haha\”,
\”name\”: \”haha\”,
\”meta\”: {
\”auth\”: true, //需要登录
\”async\”: true, //是否同步
\”title\”: \”首页\”, //标题
\”group\”: \”商城\” //分组
},
\”style\”: {
\”navigationBarTitleText\”: \”\”,
\”enablePullDownRefresh\”: false
}
}
],
\”globalStyle\”: {
\”navigationBarTextStyle\”: \”black\”,
\”navigationBarTitleText\”: \”uni-app\”,
\”navigationBarBackgroundColor\”: \”#F8F8F8\”,
\”backgroundColor\”: \”#F8F8F8\”
}
}

页面跳转和参数接收

push()

pushTab() : 跳转tar栏

replace() : 替换

replaceAll() ：替换所有

back() : 直接带上数字返回第几层

注意：path和query配合使用，而name和params配合使用

//通过name方式跳转
this.$Router.push({
name: \’home\’,
params: {
name: \’Joseph\’,
age: 22
}
})
————————————
//通过path形式进行跳转
this.$Router.push({
path: \’/https://www.u-9.cn/wp-content/uploads/2023/12/2023120111500696.pages/haha/haha\’,
query: {
name: \’Josdep33333h\’,
age: 24
}
})
————————————-
//用uni形式跳转到新页面,并传递参数
uni.navigateTo({
url:\’/https://www.u-9.cn/wp-content/uploads/2023/12/2023120111500696.pages/home/home?id=2&name=Josep33333h\’
});

获取参数

onLoad(option) {
//原生获取数据
console.log(\”zz\”,option);
// query传参
const query=this.$Route.query
console.log(query);
// params传参
const params=this.$Route.params
console.log(params);
}

以上就是uniapp路由uni-simple-router使用示例的详细内容，更多关于uniapp路由uni-simple-router的资料请关注悠久资源网其它相关文章！

您可能感兴趣的文章: