vue2的router

### Vue2 Router 使用指南

#### 安装 Vue Router
对于 Vue 2.x 版本的应用程序，可以通过 npm 或者直接通过 CDN 来安装 `vue-router`。如果选择使用 npm，则可以在项目根目录下运行命令来安装依赖包。

npm install vue-router@3

这会将兼容 Vue 2 的特定版本的 `vue-router` 添加到项目的依赖列表中[^1]。

#### 配置基础路由
创建一个新的 JavaScript 文件用于定义路由配置对象，并将其导出以便稍后在应用中导入和使用：

import Vue from 'vue';
import Router from 'vue-router';

// 导入组件
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

export default new Router({
    mode: 'history', // 可选参数，默认为 hash 模式
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home,
        },
        {
            path: '/about',
            name: 'about',
            component: About,
        }
    ]
});

上述代码片段展示了如何设置基本的历史模式下的路由表以及关联视图与对应的组件。

#### 渲染 `<router-view>` 组件
为了使页面能够动态加载不同的组件，在模板内放置一个名为 `<router-view></router-view>` 的占位符标签即可。当 URL 发生变化时，匹配成功的路由所指向的组件将会被渲染在这个位置上[^2]。

<template>
<div id="app">
    <!-- 其他 HTML 结构 -->
    
    <router-view></router-view>

    <!-- 更多HTML结构 -->
</div>
</template>

#### 处理导航守卫
有时可能希望在用户尝试访问某些受保护资源之前执行额外逻辑（比如验证身份）。可以利用全局前置钩子函数实现这一点；也可以针对单个路由添加独享的确认回调方法来进行更细粒度的操作[^3]。

const router = new Router({...});

router.beforeEach((to, from, next) => {
    // 执行一些检查...
    if (/*条件满足*/) {
        next();
    } else {
        next(false);
    }
})

#### 解决常见问题
- **无法获取 `$route` 和 `$router`:** 如果遇到此类情况，请确保已经在主应用程序实例初始化前调用了 `Vue.use(Router)` 方法。

- **浏览器刷新丢失状态:** 当采用 history 模式的路由管理器时，可能会碰到这种情况。解决方案之一是在服务器端配置支持该功能，即无论请求哪个地址都返回相同的首页文件，让前端接管后续处理工作。