Vue-router(v4.x) - 技术栈

1、路由视图

在Vue中，<router-view>是用于展示路由匹配组件的地方。它会根据当前的路由路径，渲染对应的组件。

vue 复制代码

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

    <router-view></router-view> <!-- 渲染匹配到的组件 -->
  </div>
</template>

2、路由链接(router-link)

<router-link> 是 Vue Router 提供的导航链接组件。它可以生成一个 <a> 标签，但会阻止默认的页面刷新行为，使用 Vue Router 的方式进行页面切换。

vue 复制代码

<router-link to="/about">Go to About</router-link>

你也可以使用 router-link 来传递动态参数或查询参数：

vue 复制代码

<router-link :to="{ name: 'home', query: { user: 'john' } }">Go to Home</router-link>

3、编辑式导航

你可以使用 Vue Router 提供的 API 在 JavaScript 中进行编程式导航。通常使用 router.push() 或 router.replace() 来进行跳转。

vue 复制代码

// 使用 push 方法跳转
this.$router.push('/about');

// 使用 replace 方法替换当前的路由（不添加历史记录）
this.$router.replace('/about');

// 带参数的跳转
this.$router.push({ name: 'about', query: { id: 123 } });

4、动态路由配置

动态路由允许你根据 URL 中的参数来动态加载不同的组件。例如，展示某个用户的详细信息，可以使用动态参数。

js 复制代码

const routes = [
  {
    path: '/user/:id',  // :id 为动态参数
    component: UserDetails,
  },
];

在组件中，可以通过 $route 获取当前路由的参数：

js 复制代码

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

<script>
export default {
  computed: {
    userId() {
      return this.$route.params.id;  // 获取路由参数
    }
  }
};
</script>

5、路由守卫

路由守卫可以用来拦截路由的跳转，执行一些逻辑（如验证权限、加载数据等）。

全局守卫

beforeEach：在每次路由切换之前执行。
afterEach：每次路由切换之后执行。

js 复制代码

router.beforeEach((to, from, next) => {
  // 逻辑判断，如果符合条件则调用 next()
  if (to.meta.requiresAuth && !isAuthenticated) {
    next('/login');  // 如果没有认证，跳转到登录页面
  } else {
    next();  // 继续执行路由跳转
  }
});

router.afterEach((to, from) => {
  // 路由切换后执行的逻辑
  console.log(`Navigated from ${from.fullPath} to ${to.fullPath}`);
});

路由独享守卫

在特定路由上使用守卫来进行权限控制等操作：

js 复制代码

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

6、路由重定向与别名

路由重定向

可以使用 redirect 来进行路由重定向，指向其他路由。

js 复制代码

const routes = [
  {
    path: '/old-home',
    redirect: '/new-home'
  }
];

路由别名

路由别名允许你为现有路由定义额外的路径。

js 复制代码

const routes = [
  {
    path: '/home',
    component: Home,
    alias: '/start'  // 通过 /start 也会渲染 Home 组件
  }
];