Vue3进行路由管理的示例代码

npm install vue-router@4

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,
  },
  {
    path: '/about',
    name: 'About',
    component: About,
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);

app.use(router);

app.mount('#app');

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </nav>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
};
</script>

<style>
nav {
  display: flex;
  gap: 10px;
}
</style>

{
  path: '/user/:id',
  name: 'User',
  component: User,
}

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

<script>
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    const userId = route.params.id;

    return {
      userId,
    };
  },
};
</script>

{
  path: '/about',
  name: 'About',
  component: About,
  children: [
    {
      path: 'team',
      name: 'Team',
      component: () => import('./views/Team.vue'),
    },
  ],
}

<template>
  <div>
    <h1>About</h1>
    <router-link to="team">Meet the Team</router-link>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'About',
};
</script>

router.beforeEach((to, from, next) => {
  const isAuthenticated = false; // 这里应该是你的认证逻辑
  if (to.matched.some(record => record.meta.requiresAuth) && !isAuthenticated) {
    next({ name: 'Home' });
  } else {
    next();
  }
});