快速上手uni-simple-router

以下是“快速上手uni-simple-router”的完整攻略。

简介

uni-simple-router是一个基于vue-router封装的路由库，专注于uni-app移动端应用开发。相比vue-router，它的优势在于更为简单易用，且兼容性更好。

安装

在uni-app项目的根目录下，执行以下命令进行安装：

npm install uni-simple-router --save

安装完成后，在main.js中引入和配置：

import Vue from 'vue';
import Router from 'uni-simple-router';
Vue.use(Router);

const router = new Router({
  routes: [
    // 路由配置
  ]
});

export default router;

基本使用

与vue-router类似，uni-simple-router可以通过/src/router/index.js中的配置去声明路由。不过，相较于vue-router，uni-simple-router的路由配置更为简化，以下是一个最简基础的示例：

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

在页面中，可以通过以下方式进行跳转：

// 通过路由名称跳转
this.$Router.push({
  name: 'home'
});

// 通过URL跳转
this.$Router.push('/pages/home/home');

高级用法

以下是几个比较常见的高级使用方法：

1. 路由守卫

在/src/router/index.js中，可以定义路由的进入/离开守卫，例如：

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('@/pages/home'),
      beforeEnter: (to, form, next) => {
          // 处理逻辑
      }
    }
  ]
});

2. 参数传递

通过query可以将参数传递给下一个页面，例如：

this.$Router.push({
  name: 'home',
  query: {
      a: 1,
      b: 2
  }
});

在下一个页面中，可以通过this.$Route.query获取到参数。

3. 路由模式

uni-simple-router也支持hash和history两种路由模式，例如：

const router = new Router({
  mode: 'hash'
});

const router = new Router({
  mode: 'history'
});

示例说明

示例1：路由参数传递

在页面A中，点击一个按钮跳转到页面B，同时将参数传递给页面B。在页面B中，将获取到参数并以文字形式显示在页面上。

1. 在/src/pages/a/a.vue文件中，写入以下代码：

<template>
  <view>
    <button @click="goToB">跳转到B</button>
  </view>
</template>

<script>
export default {
  methods: {
    goToB() {
      this.$Router.push({
        name: 'B',
        query: {
          id: 1
        }
      });
    }
  }
}
</script>

1. 在/src/pages/b/b.vue文件中，写入以下代码：

<template>
  <view>
    {{id}}
  </view>
</template>

<script>
export default {
  computed: {
    id() {
      return this.$Route.query.id;
    }
  }
}
</script>

1. 在/src/router/index.js文件中，写入以下代码：

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

示例2：不同路由模式的使用

在项目中，我们可以根据不同的需求去选择使用hash或history路由模式，以下是使用history路由模式的示例。

1. 在/src/router/index.js文件中，写入以下代码：

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

1. 在/src/pages/home/home.vue文件中，写入以下代码：

<template>
  <view>
    <button @click="goToMine">跳转到我的页面</button>
  </view>
</template>

<script>
export default {
  methods: {
    goToMine() {
      this.$Router.push({
        name: 'mine'
      });
    }
  }
}
</script>

1. 在/src/pages/mine/mine.vue文件中，写入以下代码：

<template>
  <view>
    我的页面
  </view>
</template>

<script>
export default {
}
</script>

通过以上示例，我们可以看到uni-simple-router的简单易用性，通过简单的配置和代码编写即可完成复杂的路由跳转和传参操作。