路由元信息

路由元信息是 uni-simple-router 中的一个重要概念，它可以用来在路由配置中添加额外的元数据信息，以便在路由跳转时进行访问和处理。

路由元信息的作用：

权限控制：可以通过路由元信息设置访问权限，限制某些页面只能被特定用户或用户角色访问。
页面标题：可以通过路由元信息设置页面的标题，以便在路由切换时动态修改浏览器的标题。
面包屑导航：可以通过路由元信息设置页面的面包屑导航信息，方便用户在页面间进行导航和定位。

添加路由元信息

在 uni-simple-router 中，可以通过以下方式添加和使用路由元信息：

在路由配置中添加元信息：

const routes = [
  {
    path: '/home',
    component: Home,
    meta: {
      requiresAuth: true,  // 设置需要登录才能访问的页面
      title: '首页'  // 设置页面标题为“首页”
    }
  },
  {
    path: '/about',
    component: About,
    meta: {
      title: '关于我们'
    }
  },
  // ...
];

在路由跳转时获取和处理路由元信息:

import { createRouter } from '@/uni-simple-router';

const router = createRouter({
  // 其他配置
  routes
});

router.beforeEach((to, from) => {
  // 获取路由元信息
  const requiresAuth = to.meta.requiresAuth;
  const title = to.meta.title;

  // 处理路由元信息
  if (requiresAuth && !isAuthenticated()) {
    // 跳转到登录页面或进行其他权限控制逻辑
    return '/login'
  } 
  // 修改页面标题
    document.title = title || '默认标题';

  // 继续路由导航
});

export default router;

通过上述写法，你可以在 uni-simple-router 中添加路由元信息，并在路由跳转时获取和处理这些元信息，实现不同的功能需求，如权限控制、动态修改页面标题等。

包含多层嵌套

在 uni-simple-router 中，可以通过 matched 属性来获取匹配的所有路由元信息。matched 是一个数组，包含了当前路由匹配的所有嵌套路由的路由记录，从根路由到当前路由的倒序排列。

以下是获取匹配的所有路由元信息的示例代码：

import { createRouter } from '@/uni-simple-router';

const router = createRouter({
  // 其他配置
  routes
});

router.beforeEach((to, from) => {
  // 获取匹配的所有路由元信息
  const matchedRoutes = to.matched;

  // 遍历匹配的路由记录，获取元信息
  const metaList = matchedRoutes.map(route => route.record.meta);

  // 在控制台打印所有路由元信息
  console.log(metaList);

});

export default router;

在上述代码中，我们通过 to.matched 获取到匹配的所有路由记录，然后使用 map 方法遍历每个路由记录，获取其对应的路由元信息 meta。最后，我们将获取到的所有路由元信息 metaList 打印到控制台。

通过这种方式，你可以获取到匹配的所有路由元信息，并进行后续的处理操作，例如根据路由元信息进行权限控制、动态修改页面标题等。

当前路由信息

要获取当前的路由信息，uni-simple-router 提供了相应的实例属性。你可以通过调用 currentRoute 来获取当前的路由信息。如果你在组件中使用，你可以直接访问 this.$Route 来获取路由信息。另外，你还可以使用组合式 API 中的 useRoute() 函数来方便地获取路由信息。

通过这些方式，你可以轻松地获取当前的路由信息，以便在页面或 JavaScript 文件中使用。

以下是获取当前路由信息的示例代码：

// xxxx.vue 
export default {
  onShow(){
    // 如果你是在 vue 组件内部，你可以直接访问 $Route
    console.log(this.$Route)
  },
}

// xxxx.vue
import { useRoute } from '@/uni-simple-router';
export default {
  setup(){
    // 如果你正在使用 组合API 那么你可以使用 useRoute() 来获取
    const route = useRoute();
    console.log(route)
  },
}

// xxxx.js
/**
 * 如果你正在 js 文件中使用，你可以直接导入你创建的 router 实例
 * 然后访问 currentRoute 属性即可
 */
import { router } from '~@/router';
console.log(router.currentRoute)


// 任何地方
/**
 * 另外你还可以直接访问挂载到uni上的 $Route 属性
 * 它允许你在任何地方使用
 */
const route = uni.$Route
console.log(route)

你还可以监听页面路由信息:

import { watch } from "vue"
import { useRoute } from '@/uni-simple-router';
// 如果你正在使用 组合API 那么你可以使用 useRoute() 来获取
const route = useRoute();

watch(route,(value)=>{
  console.log(value)
})

温馨提示

因为路由信息为 shallowRef 数据，当你在访问时需要 unref 或者使用 .value 获取真的数据。

路由元信息 ​

添加路由元信息 ​

包含多层嵌套 ​

当前路由信息 ​

路由元信息

添加路由元信息

包含多层嵌套

当前路由信息