uni-app路由 - uni-simple-router实例详解

引言

在uni-app的开发中，使用Vue.js的开发方式来创建页面，同时也使用了Vue-router来处理路由逻辑。但是，uni-app的路由也可以使用uni-simple-router来实现。uni-simple-router是一个轻量级的路由库，它使用Vue.js同样的路由API来实现跨平台的路由。

本篇文章将会对uni-simple-router进行详细的介绍，包含如何使用uni-simple-router来实现基本的路由以及高级的路由配置。

安装

uni-simple-router可以通过npm安装：

npm install uni-simple-router --save

或者通过yarn安装：

yarn add uni-simple-router

使用

安装完uni-simple-router之后，我们需要在项目中引入它并进行配置。首先，我们需要在main.js文件中引入uni-simple-router：

import Vue from 'vue'
import App from './App'
import router from './router'
import USR from 'uni-simple-router'

Vue.use(USR, {
  router
})

Vue.config.productionTip = false

App.mpType = 'app'

const app = new Vue({
  ...App
})
app.$mount()

在这个例子中，我们将router实例传递给uni-simple-router，以此来实现路由。我们还需要在router/index.js中定义路由：

import Vue from 'vue'
import Router from 'uni-simple-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/hello',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

在这个例子中，我们定义了一个路由，它将会把路径/hello映射到HelloWorld组件。

现在，我们可以在项目中使用uni-simple-router来进行路由跳转：

<template>
  <div>
    <h1>Home</h1>
    <button @click="$Router.push('/hello')">Go to HelloWorld</button>
  </div>
</template>

在这个例子中，我们使用了一个按钮来实现路由跳转。当按钮被点击时，它将会使用$Router.push方法来跳转到/hello路径。

配置

uni-simple-router支持各种各样的路由配置，包括路由表的自动生成，参数传递和路由守卫等等。

自动生成路由表

如果你的项目包含了大量的视图和组件，手动进行路由配置会变得非常麻烦。uni-simple-router支持自动生成路由表，可以通过配置项来实现：

import Vue from 'vue'
import Router from 'uni-simple-router'

Vue.use(Router)

export default new Router({
  maxWidth: 750, // 可以通过maxWidth来限制组件宽度
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/pages/home')
    }
  ],
  // 自动生成路由表
  routerMap: {
    home: {
      component: require('@/pages/home')
    },
    login: {
      component: require('@/pages/login')
    },
    register: {
      component: require('@/pages/register')
    },
    userCenter: {
      component: require('@/pages/userCenter')
    }
  }
})

在这个例子中，我们设置了routerMap属性，它包含了项目中所有的路由组件，包括home、login、register和userCenter等组件。如果我们访问的路径在routerMap中不存在，uni-simple-router会尝试引用对应的组件。

参数传递

uni-simple-router支持参数传递，可以在跳转路由时将参数传递到目标组件中。

<template>
  <div>
    <h1>Home</h1>
    <button @click="$Router.push({ path:'/hello', query:{ name:'World' } })">Go to HelloWorld with param</button>
  </div>
</template>

在这个例子中，我们使用了$Router.push方法传递参数。传递参数的方式有两种：query和params。

在query中传递参数：

使用query方式传递参数时，我们可以通过$route对象中的query属性来访问参数。在上面的例子中，HelloWorld组件可以通过$route.query.name来获取参数值"World"。

在params中传递参数：

使用params方式传递参数时，我们可以通过$route对象中的params属性来访问参数。在params方式中传递参数时需要注意，目标组件的属性名需要和路由中的属性名保持一致。

// router/index.js
{
  path: '/hello/:name',
  name: 'HelloWorld',
  component: HelloWorld
}

// HelloWorld.vue
export default {
  methods: {
    greet () {
      console.log(`Hello ${this.$route.params.name}!`)
    }
  }
}

路由守卫

路由守卫是在路由发生变化前或者变化后执行的一些操作。uni-simple-router支持beforeEach,beforeResolve和afterEach三种路由守卫。

beforeEach 守卫

beforeEach 守卫会在路由发生变化前调用，可以通过 next() 函数来执行路由的进入操作。

import Vue from 'vue'
import Router from 'uni-simple-router'
import Login from '@/pages/login'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/pages/home')
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.name === 'home') {
    if (localStorage.getItem('token')) {
      next()
    } else {
      next({ name: 'login' })
    }
  } else {
    next()
  }
})

export default router

在这个例子中，我们使用beforeEach 守卫来检查用户是否已经登录。如果用户没有登录，我们将会重定向到登录页。如果用户已经登录，我们将会放权并执行下一个路由守卫。

beforeResolve 守卫

beforeResolve 守卫会在路由变化时调用，并在 beforeRouteEnter 守卫和 beforeRouteUpdate 守卫之后执行。beforeResolve 守卫可以用于异步代码的加载和处理，因为在 beforeResolve 守卫中执行的异步代码完成后路由才会进行照常的跳转。

router.beforeResolve((to, from, next) => {
  setTimeout(() => {
    console.log('async finish')
    next()
  }, 3000)
})

在这个例子中，我们将使用 setTimeout 函数来实现异步操作。beforeResolve 守卫将会阻塞路由跳转3秒钟。当异步操作完成后，路由才会正常跳转。

afterEach 守卫

afterEach 守卫会在路由变化之后调用，如果需要进行一些统计或者数据分析，可以使用 afterEach 守卫来实现。

router.afterEach(() => {
  // 统计代码
})

示例

自动生成路由表

下面的例子演示了如何使用uni-simple-router来实现路由表的自动生成。

// router/index.js
import Vue from 'vue'
import Router from 'uni-simple-router'

Vue.use(Router)

export default new Router({
  maxWidth: 750,
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/pages/home')
    }
  ],
  routerMap: {
    home: {
      component: require('@/pages/home')
    },
    login: {
      component: require('@/pages/login')
    },
    register: {
      component: require('@/pages/register')
    },
    userCenter: {
      component: require('@/pages/userCenter')
    }
  }
})

// pages/home.vue
<template>
  <div>
    <h1>Home Page</h1>
    <p><button @click="$Router.push('/login')">Go to Login</button></p>
    <p><button @click="$Router.push('/userCenter')">Go to User Center</button></p>
  </div>
</template>

// pages/login.vue
<template>
  <div>
    <h1>Login Page</h1>
    <p><button @click="$Router.push('/register')">Go to Register</button></p>
    <p><button @click="$Router.back()">Back to Home</button></p>
  </div>
</template>

// pages/register.vue
<template>
  <div>
    <h1>Register Page</h1>
    <p><button @click="$Router.back()">Back to Login</button></p>
  </div>
</template>

// pages/userCenter.vue
<template>
  <div>
    <h1>User Center Page</h1>
    <p><button @click="$Router.back()">Back to Home</button></p>
  </div>
</template>

在这个例子中，我们使用routerMap属性来定义路由表。routerMap包含了所有需要用到的路由组件。通过这种方式，我们可以实现路由表的自动生成。

路由守卫

下面的例子演示了如何使用uni-simple-router来实现路由守卫。在该例子中，我们使用了beforeEach 守卫来检查用户是否登录。

// router/index.js
import Vue from 'vue'
import Router from 'uni-simple-router'
import Login from '@/pages/login'

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/pages/home')
    }
  ]
})

router.beforeEach((to, from, next) => {
  if (to.name === 'home') {
    if (localStorage.getItem('token')) {
      next()
    } else {
      next({ name: 'login' })
    }
  } else {
    next()
  }
})

export default router

// pages/login.vue
<template>
  <div>
    <h1>Login Page</h1>
    <p><button @click="login">Login</button></p>
  </div>
</template>

<script>
export default {
  methods: {
    login () {
      localStorage.setItem('token', '123456')
      this.$Router.back()
    }
  }
}
</script>

在这个例子中，我们使用了localStorage来模拟登录，当用户打开应用并进入了home路由时，我们会检查localStorage中是否存在token。如果存在token，则可以进入home路由，否则就重定向到login路由。