目錄正文安裝配置router文件夾下對(duì)應(yīng)的 js文件main.jspage.json頁面跳轉(zhuǎn)和參數(shù)接收獲取參數(shù)正文

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

安裝// 項(xiàng)目根目錄執(zhí)行命令行 下載穩(wěn)定版本 npm install uni-simple-router@2.0.7 // 根據(jù)pages.json總的頁面，自動(dòng)構(gòu)建路由表npm install uni-read-pages配置

vue.config.js

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

// vue.config.jsconst 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文件夾下對(duì)應(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('請(qǐng)登錄');} }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.jsimport {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端必須這樣寫才有效果// #endifpage.json 'pages': [ //pages數(shù)組中第一項(xiàng)表示應(yīng)用啟動(dò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形式進(jìn)行跳轉(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.queryconsole.log(query);// params傳參const params=this.$Route.paramsconsole.log(params);}

以上就是uniapp路由uni-simple-router使用示例的詳細(xì)內(nèi)容，更多關(guān)于uniapp路由uni-simple-router的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！