目錄正文安裝配置router文件夾下對應的 js文件main.jspage.json頁面跳轉和參數接收獲取參數正文

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

安裝// 項目根目錄執行命令行 下載穩定版本 npm install [email protected] // 根據pages.json總的頁面，自動構建路由表npm install uni-read-pages配置

vue.config.js

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

// 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文件夾下對應的 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.jsimport {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端必須這樣寫才有效果// #endifpage.json 'pages': [ //pages數組中第一項表示應用啟動頁，參考：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' }}頁面跳轉和參數接收

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: '/pages/haha/haha',query: { name: 'Josdep33333h', age: 24}})-------------------------------------//用uni形式跳轉到新頁面,并傳遞參數uni.navigateTo({ url:'/pages/home/home?id=2&name=Josep33333h'});獲取參數 onLoad(option) { //原生獲取數據console.log('zz',option); // query傳參const query=this.$Route.queryconsole.log(query);// params傳參const params=this.$Route.paramsconsole.log(params);}

以上就是uniapp路由uni-simple-router使用示例的詳細內容，更多關于uniapp路由uni-simple-router的資料請關注好吧啦網其它相關文章！