使用Vue3展示在Vue Router中实现嵌套路由

<template>
  <router-link to="/parent/child1">Child 1</router-link>
  <router-link to="/parent/child2">Child 2</router-link>
  <router-view></router-view>
</template>
 
<script setup>
import { useRouter } from 'vue-router';
 
const router = useRouter();
 
// 导航守卫示例：在进入路由前验证权限
router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    // 假设有一个isAuthenticated函数用来检查用户是否已经登录
    next('/login'); // 如果用户未登录，重定向到登录页面
  } else {
    next(); // 如果用户已登录或不需要登录，正常进入目标路由
  }
});
</script>
 
<style scoped>
/* 这里可以添加一些样式 */
</style>

这个代码实例展示了如何在Vue 3中使用Vue Router实现嵌套路由，并使用<router-link>来导航到不同的子路由。同时，它演示了如何使用router.beforeEach添加导航守卫来实现路由访问前的权限验证。这是一个典型的Vue应用程序中的安全实践，有助于增强用户体验和应用程序的安全性。