Vue-router课程：新手入门教程与实践指南

本文详细介绍了Vue-router课程，包括其基本概念、功能、安装配置方法以及基础路由配置。文中还涵盖了路由参数与查询参数的使用、路由守卫的应用，以及通过实战演练加深理解的步骤。

什么是Vue-router

Vue-router 是 Vue.js 官方的路由管理器，它主要用于构建单页面应用（SPA，Single Page Application）。Vue-router 通过路由来管理应用中的不同视图，根据路由配置展示不同的组件。简单来说，它负责管理不同视图之间的跳转和切换。

为什么需要Vue-router

在单页面应用中，页面不会像传统多页面应用那样通过全页刷新来切换，而是通过路由来动态加载和切换视图组件。Vue-router 提供了如下功能：

• 路由管理：管理和配置应用中的不同路由。
• 组件切换：根据路由配置，动态加载和切换不同的视图组件。
• 导航：提供各种导航辅助方法，使得导航更加方便和强大。
• 过渡效果：提供用于视图切换的过渡动画功能。
• 权限控制：通过路由守卫，实现权限控制和登录验证。

Vue-router的基本用法

Vue-router 通过 router-link 组件和 router-view 组件来实现路由的切换。router-link 用于创建带链接功能的按钮，而 router-view 是用来显示被路由匹配到的视图组件。

例如，假设有一个简单的应用，包含两个视图组件 Home 和 About，可以这样配置：

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    { path: '/', component: Home },
    { path: '/about', component: About }
  ]
});

export default new Vue({
  el: '#app',
  router
});
</script>

如何安装Vue-router

Vue-router 可以通过 npm 或 yarn 安装。以下是安装步骤：

• 使用 npm 安装：

  npm install vue-router

• 使用 yarn 安装：

  yarn add vue-router

如何在项目中配置Vue-router

安装完毕后，需要在项目中引入并配置 Vue-router。首先，引入 Vue 和 Vue-router：

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

然后，创建并配置路由实例：

Vue.use(Router);

const router = new Router({
  routes: [
    // 路由配置项
  ]
});

最后，在项目主入口文件中，将 router 实例注入到 Vue 实例中：

export default new Vue({
  el: '#app',
  router
});

创建路由器实例

创建 Vue-router 实例时，需要传入一个配置对象。该配置对象至少需要包含 routes 属性，该属性是一个数组，包含了所有的路由配置项。每个路由配置项是一个对象，包含 path 和 component 属性。

const router = new Router({
  routes: [
    { path: '/', component: HomeComponent },
    { path: '/about', component: AboutComponent }
  ]
});

配置路由表

路由配置表定义了应用中所有的路由，每个路由配置项都包含以下几个主要属性：

• path：路由路径，必填。
• component：对应路径的视图组件，必填。
• name：路由名称，可选。
• props：是否将 params 和 query 作为 props 传递给组件，可选。

例如：

const router = new Router({
  routes: [
    {
      path: '/',
      component: Home,
      name: 'home'
    },
    {
      path: '/about',
      component: About,
      props: true
    }
  ]
});

路由跳转与链接

在 Vue 中，可以通过 <router-link> 组件来创建链接，也可以使用 router.push() 方法来程序化地跳转路由。

使用 <router-link>

<router-link> 组件类似于 HTML 中的 <a> 标签，用于创建带链接功能的按钮。其 to 属性用于指定链接的目标路由。

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

使用 router.push()

router.push() 方法用于程序化地跳转路由，返回一个新的 Promise，表示路由跳转是否成功。

this.$router.push('/about');

使用动态路由参数

动态路由参数可以通过 path 中的动态占位符 :paramName 来定义。对应的组件将通过 params 对象获取这些参数。

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

在组件中获取参数：

export default {
  name: 'User',
  props: {
    id: Number
  },
  created() {
    console.log(this.id);
  }
}

使用 router.push() 或 <router-link> 跳转时，传递参数：

// router.push()
this.$router.push({ name: 'user', params: { id: 123 } });

// router-link
<router-link :to="{ name: 'user', params: { id: 123 } }">User 123</router-link>

处理查询参数

查询参数可以通过 ?paramName=value 的形式附加到 URL 后面，例如：/user?id=123。query 对象用于获取这些参数。

<router-link :to="{ name: 'user', query: { id: 123 } }">User 123</router-link>

在组件中获取查询参数：

export default {
  name: 'User',
  props: {
    id: Number
  },
  created() {
    console.log(this.$route.query.id);
  }
}

使用 beforeEach 和 beforeResolve

Vue-router 提供了几个全局的导航守卫，它们会在导航发生前调用：

• beforeEach：一个全局的前置守卫，每次路由切换时都会调用。
• beforeResolve：一个全局的解析守卫，每次路由切换时都会调用，但在导航被确认之前，但在守卫被调用之后。

示例代码：

router.beforeEach((to, from, next) => {
  // 通用逻辑，如加载层
  console.log('beforeEach: ', to, from);
  next();
});

router.beforeResolve((to, from, next) => {
  // 通用逻辑，如延迟加载组件
  console.log('beforeResolve: ', to, from);
  next();
});

编写登录验证逻辑

可以利用 beforeEach 来实现登录验证：

router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token');
  if (to.path === '/login' && token) {
    next({ path: '/home' });
  } else if (!token && to.path !== '/login') {
    next({ path: '/login' });
  } else {
    next();
  }
});

路由导航的错误处理

beforeEach 和 beforeResolve 守卫还可以用于错误处理。如果导航过程中发生了异常，可以在这里捕获并处理。

router.beforeEach((to, from, next) => {
  try {
    // 业务逻辑
    next();
  } catch (error) {
    console.error('Error during navigation:', error);
    next('/error');
  }
});

创建一个简单的单页应用

创建一个简单的单页应用，包含两个页面：主页和关于我们。

首先，创建项目结构：

mkdir vue-router-tutorial
cd vue-router-tutorial
npm init -y
npm install vue vue-router

创建 src 文件夹，并在其中添加以下文件：

• App.vue
• components/Home.vue
• components/About.vue
• router.js

App.vue

<template>
  <div id="app">
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-link :to="{ name: 'user', params: { id: 123 } }">User 123</router-link>
    <router-view></router-view>
    <button @click="navigateToUser">Navigate to User</button>
  </div>
</template>

<script>
import Vue from 'vue';
import Router from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';
import User from './components/User.vue';

Vue.use(Router);

export default {
  name: 'App',
  components: {
    Home,
    About,
    User
  },
  methods: {
    navigateToUser() {
      this.$router.push({ name: 'user', params: { id: 456 } });
    }
  },
  router: new Router({
    routes: [
      { path: '/', component: Home, name: 'home' },
      { path: '/about', component: About, name: 'about' },
      { path: '/user/:id', component: User, name: 'user' }
    ]
  })
};
</script>

Home.vue

<template>
  <div>
    <h1>Home Page</h1>
  </div>
</template>

<script>
export default {
  name: 'Home'
};
</script>

About.vue

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'About'
};
</script>
``

#### User.vue

```html
<template>
  <div>
    <h1>User {{ $route.params.id }}</h1>
  </div>
</template>

<script>
export default {
  name: 'User'
};
</script>
``

### 动手实践：实现导航、路由切换和参数传递

在上面创建的简单应用基础上，增加一个带参数的动态路由，例如 `/user/:id`。同时，添加一个按钮，点击按钮时跳转到该路由。

通过上面的步骤，我们创建了一个简单但功能齐全的单页面应用，包括主页、关于我们页面和带参数的用户页面，并实现了按钮跳转到用户页面的功能。

以上是关于 Vue-router 的入门教程和实践指南，希望对学习者有所帮助。