Vue2从入门到精通：全面掌握前端开发利器Vue.js！（第十二部分路由Router.js部分）

目录

十二.路由

1. 安装 Vue Router

2. 配置和使用 Vue Router

3. 创建路由组件

4. 设置路由导航

5. 运行效果

十三、路由高阶

1. 使用路由传参

通过路由参数传递参数

跳转到带参数的路由：

通过 query 参数传递参数

2. 接收参数

十四.路由守卫

全局前置守卫 (Global Before Guards)

全局解析守卫 (Global Resolve Guards)

全局后置钩子 (Global After Hooks)

路由独享守卫 (Per-Route Guards)

组件内守卫 (In-Component Guards)

---

十二.路由

在 Vue 2 中使用路由，你需要安装和配置 Vue Router。下面是安装和基本使用步骤：

1. 安装 Vue Router

首先，确保你的项目已经安装了 Vue 2。然后，使用 npm 或者 yarn 安装 Vue Router：

npm install vue-router
# 或者
yarn add vue-router

2. 配置和使用 Vue Router

在你的 Vue 项目中，通常有一个主文件，比如 main.js，用来初始化 Vue 实例和加载其他模块。在这里配置和使用 Vue Router。

main.js：

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import HomeComponent from './components/HomeComponent.vue';
import AboutComponent from './components/AboutComponent.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: HomeComponent },
  { path: '/about', component: AboutComponent }
];

const router = new VueRouter({
  routes // short for `routes: routes`
});

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

3. 创建路由组件

创建你的路由组件，例如 HomeComponent.vue 和 AboutComponent.vue。

HomeComponent.vue：

<template>
  <div>
    <h2>Home Component</h2>
    <p>Welcome to the home page!</p>
  </div>
</template>

<script>
export default {
  // Component logic here
};
</script>

AboutComponent.vue：

<template>
  <div>
    <h2>About Component</h2>
    <p>This is the about page.</p>
  </div>
</template>

<script>
export default {
  // Component logic here
};
</script>

4. 设置路由导航

在应用中，你可以使用 <router-link> 组件来导航到不同的路由。例如，在 App.vue 中：

App.vue：

<template>
  <div id="app">
    <h1>Vue 2 Router Example</h1>
    
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  // Component logic here
};
</script>

• <router-link> 是 Vue Router 提供的组件，用来生成一个 <a> 标签，点击后会跳转到指定的路由路径。
• <router-view> 是一个用来显示当前匹配到的路由组件的容器。

5. 运行效果

在运行时，当你点击 "Home" 或 "About" 链接时，Vue Router 会根据配置的路由路径加载相应的组件到 <router-view> 中显示。

这些步骤展示了如何在 Vue 2 中安装、配置和基本使用 Vue Router，实现简单的页面导航和路由功能。

十三、路由高阶

在 Vue 2 中，可以通过路由传参来实现 URL 地址传参，其中包括使用 query 参数进行传参。以下是如何在 Vue 2 中实现这些功能的步骤：

1. 使用路由传参

通过路由参数传递参数

假设我们有一个需要接收 id 参数的路由。例如，我们要跳转到 /user/:id 这样的路由，其中 id 是动态的。

定义路由：

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: UserComponent }
  ]
});

跳转到带参数的路由：

<router-link :to="'/user/' + userId">User Profile</router-link>

这里的 userId 是从 Vue 实例中获取的动态数据。

通过 query 参数传递参数

如果你希望通过 query 参数传递参数，可以在跳转时在 to 属性中使用对象的形式：

<router-link :to="{ path: '/user', query: { id: userId }}">User Profile</router-link>

或者，使用 router.push 方法：

this.$router.push({ path: '/user', query: { id: userId }});

2. 接收参数

在接收参数的组件中，你可以使用 $route 对象来访问路由参数和 query 参数。

在组件中访问路由参数：

export default {
  mounted() {
    // 访问路由参数
    console.log(this.$route.params.id);
    
    // 访问 query 参数
    console.log(this.$route.query.id);
  }
}

在上面的例子中，this.$route.params.id 对应的是路由路径中的 id 参数，而 this.$route.query.id 对应的是通过 query 参数传递的 id 值。 

十四.路由守卫

在 Vue 2 中，路由守卫可以用于在导航过程中对路由进行拦截和控制，从而实现诸如权限验证、页面加载状态管理等功能。下面列举了一些常见的路由守卫使用案例：

全局前置守卫 (Global Before Guards)

全局前置守卫会在路由切换开始时被调用，常用于权限验证和导航拦截。

router.beforeEach((to, from, next) => {
  // 在进入路由之前进行权限验证或其他操作
  if (to.meta.requiresAuth && !auth.isAuthenticated()) {
    next('/login'); // 如果需要验证权限且未认证，则跳转到登录页面
  } else {
    next(); // 继续路由导航
  }
});

全局解析守卫 (Global Resolve Guards)

全局解析守卫在路由被解析之后被调用，可以访问路由解析得到的数据。

router.beforeResolve((to, from, next) => {
  // 在导航完成之前，可以进行一些额外的数据处理或操作
  fetchUserData(to.params.id).then(user => {
    to.meta.user = user; // 将获取的用户数据存储在元数据中
    next();
  }).catch(error => {
    console.error('Failed to fetch user data', error);
    next('/error'); // 处理异常情况
  });
});

全局后置钩子 (Global After Hooks)

全局后置钩子会在导航完成后被调用，常用于页面加载完成后的清理或者动画效果。

router.afterEach((to, from) => {
  // 页面导航完成后的操作，比如记录页面访问日志
  logPageVisit(to.fullPath);
});

路由独享守卫 (Per-Route Guards)

路由独享守卫只在某个路由配置中定义，仅对该路由及其子路由生效。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      component: AdminPanel,
      beforeEnter: (to, from, next) => {
        // 只有管理员才能访问该路由
        if (store.state.user.role === 'admin') {
          next();
        } else {
          next('/'); // 非管理员则返回首页
        }
      }
    }
  ]
});

组件内守卫 (In-Component Guards)

组件内守卫是直接在组件中定义的守卫，用于处理特定组件内的路由事件。

export default {
  beforeRouteEnter(to, from, next) {
    // 在进入路由之前，在该组件被创建之前调用
    console.log('beforeRouteEnter');
    next();
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    console.log('beforeRouteUpdate');
    next();
  },
  beforeRouteLeave(to, from, next) {
    // 在离开当前路由时调用
    console.log('beforeRouteLeave');
    next();
  }
};