uni-simple-router

主题

On this page

在 uni-app 中使用 uni-simple-router 实现动态路由配置 ​

在 uni-app 项目中，使用 uni-simple-router 插件来实现动态路由配置可以大大简化路由管理和页面导航。以下是详细的步骤来在 uni-app 中配置和使用动态路由：

1. 安装 uni-simple-router ​

要在 uni-app 项目中使用 uni-simple-router，首先需要进行安装。你可以在官方地址 扫码登录后授权下载.

2. 配置 uni-simple-router ​

2.1 创建路由配置文件 ​

在 src/router 目录下创建一个路由配置文件，例如 index.js。在这个文件中配置你的动态路由：

js
import Router from 'uni-simple-router';

const Home = __dynamicImportComponent__(`@/pages/home.vue`,{pageType:`top`})
const About = __dynamicImportComponent__(`@/pages/about.vue`,{pageType:`top`})
const User = __dynamicImportComponent__(`@/pages/user.vue`,{pageType:`top`})

const router = createRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/user/:id', // 动态路由
      name: 'user',
      component: User,
      props: true // 将路由参数作为 props 传递给组件
    }
  ]
});

export default router;

2.2 配置入口文件 ​

在项目的入口文件（通常是 main.js 或 main.ts）中，引入并使用配置好的路由：

js
// main.js
import { createSSRApp } from "vue";
import App from "./App.vue";
import router from '@/router' 

export function createApp() {
  const app = createSSRApp(App);
  return {
    app,
    router  
  };
}

3. 在页面中使用动态路由 ​

3.1 访问路由参数 ​

在动态路由对应的页面组件中，你可以通过 this.$Route.params 访问路由参数。例如，在 User.vue 组件中：

js
<template>
  <div>
    <h1>User Page</h1>
    <p>User ID: {{ userId }}</p>
  </div>
</template>

<script>
export default {
  props: ['id'], // 将路由参数作为 props 传递
  computed: {
    userId() {
      return this.$Route.params.id; // 访问路由参数
    }
  }
};
</script>

3.2 编程式导航 ​

使用 router.push 或 router.replace 进行编程式导航，并传递动态参数。例如，在 Home.vue 组件中：

js
<template>
  <div>
    <button @click="goToUser">Go to User 123</button>
  </div>
</template>

<script>
export default {
  methods: {
    goToUser() {
      this.$Router.push({ name: 'user', params: { id: 123 } });
    }
  }
};
</script>

3.3 懒加载组件 ​

使用动态导入语法来懒加载组件，从而提升应用性能。例如，在路由配置中：

js
const router = createRouter({
  routes: [
    {
      path: '/user/:id',
      name: 'user',
      component: __dynamicImportComponent__('@/pages/user.vue',{pageType:`top`}), // 懒加载组件
      props: true
    }
  ]
});

4. 配置路由守卫 ​

你可以在路由配置中添加全局路由守卫来处理路由切换前后的逻辑。例如：

js
router.beforeEach((to, from) => {
  console.log('Before route change to:', to.path);
  // 在路由切换前执行逻辑，例如验证用户是否已登录
  if (to.name !== 'login' && !isLoggedIn()) {
    return { name: 'login' }
  } else {
    return // 继续路由切换
  }
});

router.afterEach((to, from) => {
  console.log('After route change to:', to.path);
});

5. 总结 ​

通过 uni-simple-router 插件，你可以轻松地在 uni-app 中实现动态路由配置。动态路由允许根据 URL 参数动态加载不同的组件，并支持编程式导航、懒加载和路由守卫等功能。这样，你可以根据项目的实际需求灵活配置和管理路由，提高开发效率和应用性能。