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守衛、是否進行路由許可權管理等等，同時也需要考慮到用戶體驗和性能問題。