一文详解Vue Router的使用和路由守卫

npm install vue-router

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

const routes = [
  { path: '/', component: Home },
  { path: '/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">
    <router-view></router-view>
  </div>
</template>

// 在组件中
this.$router.push('/about');
// 或
this.$router.replace('/home');

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function navigateToAbout() {
      router.push('/about');
    }

    return { navigateToAbout };
  }
}

<template>
  <nav>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
  </nav>
</template>

router.beforeEach((to, from, next) => {
  console.log('Global beforeEach');
  // 判断是否需要登录
  if (to.meta.requiresAuth && !isAuthenticated()) {
    next('/login'); // 没有权限，重定向到登录页
  } else {
    next(); // 允许导航
  }
});

router.afterEach((to, from) => {
  console.log('Global afterEach');
  // 可用于执行一些操作，例如更新页面标题
  document.title = to.meta.title || 'Default Title';
});

router.beforeResolve((to, from, next) => {
  console.log('Global beforeResolve');
  next();
});

const routes = [
  {
    path: '/profile',
    component: Profile,
    beforeEnter: (to, from, next) => {
      console.log('Route beforeEnter');
      if (to.meta.requiresAuth && !isAuthenticated()) {
        next('/login');
      } else {
        next();
      }
    }
  }
];

export default {
  name: 'Profile',
  beforeRouteEnter(to, from, next) {
    console.log('Component beforeRouteEnter');
    // 可以获取到组件实例
    next(vm => {
      console.log('Component instance:', vm);
    });
  }
}

export default {
  name: 'Profile',
  beforeRouteUpdate(to, from, next) {
    console.log('Component beforeRouteUpdate');
    // 处理路由更新逻辑
    next();
  }
}

export default {
  name: 'Profile',
  beforeRouteLeave(to, from, next) {
    console.log('Component beforeRouteLeave');
    // 确认离开操作
    if (confirm('Do you really want to leave?')) {
      next();
    } else {
      next(false); // 取消导航
    }
  }
}

const routes = [
  { path: '/user/:id', component: User }
];
在组件中通过 this.$route.params 访问动态参数：

javascript
export default {
  computed: {
    userId() {
      return this.$route.params.id;
    }
  }
}

const routes = [
  {
    path: '/profile',
    component: Profile,
    children: [
      { path: 'settings', component: ProfileSettings }
    ]
  }
];

<template>
  <div>
    <h2>Profile</h2>
    <router-view></router-view>
  </div>
</template>

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  }
];

const routes = [
  {
    path: '/user/:id',
    component: UserProfile,
    alias: '/profile/:id' // 使用别名
  }
];

const routes = [
  {
    path: '/admin',
    component: Admin,
    meta: { requiresAuth: true, title: 'Admin Page' }
  },
  {
    path: '/public',
    component: Public,
    meta: { title: 'Public Page' }
  }
];

export default {
  name: 'MyComponent',
  computed: {
    pageTitle() {
      return this.$route.meta.title || 'Default Title';
    }
  }
};

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !isLoggedIn()) {
    next('/login');
  } else {
    next();
  }
});

{
   name: 'information',
   path: '/information',
   component: () => import('@/view/app/information/Main')
},