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

更新時間：2023年07月10日 10:20:13 作者：小李不小

這篇文章主要為大家介紹了uniapp路由uni-simple-router使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

正文

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

安裝

// 項目根目錄執(zhí)行命令行  下載穩(wěn)定版本  
npm install uni-simple-router@2.0.7 
// 根據(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文件夾下對應的 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端 你應該去除原有的app.$mount();使用路由自帶的渲染方式
// #ifdef H5
    RouterMount(app,router,'#app')
// #endif
// #ifndef H5
    app.$mount(); //為了兼容小程序及app端必須這樣寫才有效果
// #endif

page.json

    "pages": [ //pages數(shù)組中第一項表示應用啟動頁，參考：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": "首頁", //標題
                "group": "商城" //分組
            },
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        },{
            "path": "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"
    }
}

頁面跳轉(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);
        }

以上就是uniapp路由uni-simple-router使用示例的詳細內(nèi)容，更多關(guān)于uniapp路由uni-simple-router的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: