uniapp路由全面解析

一、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守卫、是否进行路由权限管理等等，同时也需要考虑到用户体验和性能问题。