vue3 中 vue-router 如何设置meta

1. vue3 中 vue-router 如何设置meta

在 Vue.js 应用中使用 vue-router 可以方便地管理路由，并且可以通过路由的 meta 属性来传递一些非操作性的信息。

这些信息可以用来做很多事情，比如控制导航守卫、动态设置页面标题或 SEO 元数据等。

下面是如何在 Vue Router 中为路由设置 meta 字段的示例：

1.1. 定义路由时设置 meta

首先，在定义路由的时候可以在每个路由对象中添加一个 meta 属性。

这个属性可以是任何你需要的数据类型，如字符串、数字、对象等。

 import { createRouter, createWebHistory } from 'vue-router';import Home from './views/Home.vue';import About from './views/About.vue';const routes = [  {    path: '/',    name: 'Home',    component: Home,    meta: {      title: '首页',      requiresAuth: true // 这是一个自定义的 meta 字段，可以用来控制是否需要认证    }  },  {    path: '/about',    name: 'About',    component: About,    meta: {      title: '关于我们'    }  }];const router = createRouter({  history: createWebHistory(),  routes});

1.2. 在组件中访问路由的 meta 数据

你可以通过 $route.meta 访问当前路由的 meta 数据。

例如，在组件内部或者全局的导航守卫中使用它。

1.2.1. 组件内部使用：

 <template>  <div>    <h1>{{ $route.meta.title }}</h1>    <!-- 其他组件代码 -->  </div></template><script>export default {  mounted() {    document.title = this.$route.meta.title;  }}</script>

1.2.2. 使用全局导航守卫：

你也可以在全局的导航守卫中使用 $route.meta 数据来做一些事情，比如检查是否需要登录：

 router.beforeEach((to, from, next) => {  if (to.meta.requiresAuth && !auth.isLoggedIn()) {    next({ name: 'Login' }); // 如果需要认证但用户未登录，则跳转到登录页  } else {    next();  }});

以上就是在 Vue Router 中设置和使用 meta 的方法。可以根据具体的应用场景来扩展 meta 的用途。