一、uniapp路由守卫
uniapp提供了钩子函数beforeEnter作为路由进入守卫,它可以在路由进入前进行钩子拦截操作,可用于判断登录状态或者一些权限问题。在路由配置传入beforeEnter函数,在跳转到该路由之前,该函数会被调用。
export default [ { path: '/home', component: () => import('@/pages/home.vue'), beforeEnter: (to, from, next) => { if (userAuthenticated) { next() } else { next('/login') } } }, { path: '/login', component: () => import('@/pages/login.vue') } ]
二、uniapp路由权限
在uniapp中设置路由权限也是比较常见的需求,我们可以通过beforeEnter钩子函数及vue中的vuex状态管理来实现,我们可以在store中定义判断登录状态的方法,然后在路由的beforeEnter中进行调用。
const store = new Vuex.Store({ state: { token: localStorage.getItem('token') }, mutations: { setToken(state, token) { state.token = token localStorage.setItem('token', token) }, clearToken(state) { state.token = null localStorage.removeItem('token') } }, actions: { async login({ commit }, { username, password }) { const res = await axios.post('/api/login', { username, password }) const token = res.data.token commit('setToken', token) }, async logout({ commit }) { commit('clearToken') } }, getters: { isAuthenticated(state) { return !!state.token } } }) // 路由配置 export default [ { path: '/home', component: () => import('@/pages/home.vue'), beforeEnter: (to, from, next) => { if (store.getters.isAuthenticated) { next() } else { next('/login') } } }, { path: '/login', component: () => import('@/pages/login.vue') } ]
三、uniapp路由跳转传参
在uniapp中,可以通过params和query两种方式进行路由参数传递,对于传递一些较大的数据,建议使用state进行传递。
// 带参数路由跳转,params方式进行传参 uni.navigateTo({ url: '/pages/userDetail/index?id=' + id }) // params方式获取参数 onLoad(options) { console.log(options) // { id: 1 } } // 带参数路由跳转,query方式进行传参 uni.navigateTo({ url: '/pages/userDetail/index?id=' + id }) // query方式获取参数 onLoad(options) { console.log(options) // { id: 1 } } // 带参数路由跳转,state方式进行传参 uni.navigateTo({ url: '/pages/userDetail/index', state: { id: 1 } }) // state方式获取参数 onLoad(options) { console.log(options.$state) // { id: 1 } }
四、uniapp官网
uniapp官网提供了详细的路由API文档,包括路由跳转、路由参数传递、路由拦截等等内容,开发者可以根据需要进行查阅。
uniapp官网:https://uniapp.dcloud.io/
五、uniapp官方文档
uniapp官方文档中提供了详细的路由相关文档,包括路由跳转的方式、路由参数传递方式等等内容,对于开发者来说是比较有参考意义的。
uniapp官方文档:https://uniapp.dcloud.io/router?id=router
六、uniapp路由传参
uniapp支持多种方式进行路由传参,包括params、query、state等,开发者可以根据需要进行选择。
// params方式进行路由传参 uni.navigateTo({ url:'/pages/userDetail/index?id=' + id }) // query方式进行路由传参 uni.navigateTo({ url:'/pages/userDetail/index?id=' + id }) // state方式进行路由传参 uni.navigateTo({ url: '/pages/userDetail/index', state: { id: 1 } })
七、uniapp路由器
uniapp的路由器是一个vue router,具有完整的vue router功能。在使用uniapp的路由器之前,需要安装vue-router插件,在项目根目录下执行命令:npm install vue-router --save。
路由器使用方式:
import Vue from 'vue' import VueRouter from 'vue-router' import routes from './router' Vue.use(VueRouter) export default new VueRouter({ mode: 'history', routes })
八、uniapp路由跳转方式
uniapp支持多种路由跳转方式,包括navigateTo、redirectTo、switchTab、reLaunch等等,每个方法有不同的用途。
// navigateTo方式进行跳转 uni.navigateTo({ url: '/pages/userDetail/index' }) // redirectTo方式进行跳转 uni.redirectTo({ url: '/pages/userDetail/index' }) // switchTab方式进行跳转,用于tab菜单页面跳转 uni.switchTab({ url: '/pages/index/index' }) // reLaunch方式进行跳转,关闭所有页面后跳转 uni.reLaunch({ url: '/pages/index/index' })
九、uniapp路由传值
uniapp路由传值方式多种多样,除了params和query传参方式外,还可以通过storage进行全局跨页面传值,也可以通过vuex进行跨组件传值。
// storage方式进行跨页面传值 // 页面A中存储数据 uni.setStorageSync('name', 'John') // 页面B中获取数据 const name = uni.getStorageSync('name') // vuex方式进行跨组件传值 const store = new Vuex.Store({ state: { name: '' }, mutations: { updateName(state, name) { state.name = name } } }) // 组件A中更新数据 store.commit('updateName', 'John') // 组件B中获取数据 const name = this.$store.state.name
十、uniapp路由配置选取
在uniapp中,路由配置也是需要根据项目需求进行选取,比如是否使用beforeEnter守卫、是否进行路由权限管理等等,同时也需要考虑到用户体验和性能问题。