面试题：什么是 Vue 的前端路由？如何实现？

什么是 Vue 的前端路由？

前端路由是指在前端应用中，通过 JavaScript 动态管理 URL 的变化，并根据 URL 的变化渲染不同的组件或页面，而无需向服务器发起新的请求。Vue 的前端路由通常通过 Vue Router 实现。

前端路由的特点：

单页应用（SPA）：前端路由是单页应用的核心特性之一，页面不会刷新，只有部分内容动态更新。
URL 与视图同步：URL 的变化会触发视图的更新，同时视图的变化也会反映到 URL 上。
无需服务器请求：路由切换时，不会向服务器发起新的请求，所有逻辑都在前端处理。

如何实现 Vue 的前端路由？

Vue 的前端路由通常通过 Vue Router 实现。以下是实现 Vue 前端路由的步骤：

1. 安装 Vue Router

如果使用 Vue CLI 创建项目，可以选择安装 Vue Router。如果没有安装，可以通过以下命令手动安装：

npm install vue-router

2. 配置路由

在项目中创建一个路由配置文件（通常是 router/index.js），并配置路由规则。

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '../views/Home.vue';
import About from '../views/About.vue';

// 使用 VueRouter 插件
Vue.use(VueRouter);

// 定义路由规则
const routes = [
  {
    path: '/', // 路径
    component: Home // 对应的组件
  },
  {
    path: '/about',
    component: About
  }
];

// 创建路由实例
const router = new VueRouter({
  mode: 'history', // 使用 history 模式（去掉 URL 中的 #）
  routes
});

export default router;

3. 在 Vue 实例中使用路由

在 main.js 中引入路由实例，并将其挂载到 Vue 实例上。

// src/main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由配置

new Vue({
  router, // 挂载路由
  render: h => h(App)
}).$mount('#app');

4. 在组件中使用路由

在组件中，可以通过 <router-link> 实现路由跳转，通过 <router-view> 渲染匹配的组件。

<!-- src/App.vue -->
<template>
  <div id="app">
    <nav>
      <!-- 使用 router-link 实现路由跳转 -->
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav>
    <!-- 使用 router-view 渲染匹配的组件 -->
    <router-view></router-view>
  </div>
</template>

5. 路由模式

Vue Router 支持两种路由模式：

Hash 模式：URL 中带有 #，例如 http://example.com/#/home。

默认模式，兼容性更好。
通过 window.location.hash 实现。

History 模式：URL 中没有 #，例如 http://example.com/home。

更美观，但需要服务器支持。
通过 history.pushState 实现。

在路由配置中，可以通过 mode 选项指定模式：

const router = new VueRouter({
  mode: 'history', // 使用 history 模式
  routes
});

6. 动态路由

可以通过动态路由参数实现更灵活的路由匹配。

// 路由配置
const routes = [
  {
    path: '/user/:id', // 动态路由参数
    component: User
  }
];

// 组件中获取参数
export default {
  mounted() {
    console.log(this.$route.params.id); // 获取动态参数
  }
}

7. 导航守卫

可以通过导航守卫在路由跳转前后执行逻辑。

router.beforeEach((to, from, next) => {
  if (to.path === '/restricted') {
    next('/login'); // 重定向到登录页
  } else {
    next(); // 允许跳转
  }
});

总结

Vue 的前端路由通过 Vue Router 实现，主要包括以下步骤：

安装 Vue Router。
配置路由规则。
在 Vue 实例中挂载路由。
在组件中使用 <router-link> 和 <router-view>。
选择路由模式（Hash 或 History）。
支持动态路由和导航守卫。

通过前端路由，Vue 可以实现单页应用（SPA）的页面切换和 URL 管理，提升用户体验和性能。

THE END