VueJS 官方路由之 Vue Router

参考

项目	描述
搜索引擎	Bing
哔哩哔哩	黑马程序员
Vue Router	官方教程

描述

项目	描述
Edge	109.0.1518.70 (正式版本) (64 位)
操作系统	Windows 10 专业版
@vue/cli	5.0.8
npm	8.19.3
VueJS	2.6.14
Vue Router	3.6.5

Vue Router

Vue Router 是 VueJS 官方提供的路由插件，使用该插件你将能更加便利的管理 VueJS 创建的单页面应用程序（Single Page Web Application，SPA）中的组件间的动态切换。

获取

npm

npm install vue-router

yarn

yarn add vue-router

依赖问题

vue-router 4.x 仅支持 vue-router 3.x 版本，但我使用的 VueJS 的版本号为 2.6.14，所以我将使用如下命令安装 vue-router 3.x：

npm install vue-router@3

请注意您使用的 vue-router 是否与使用的 VueJS 相匹配，如果不匹配你可能将在控制台中看到如下错误信息：

使用

router-link

router-link 元素为组件元素，该元素拥有 to 属性，你可以通过该元素定义路由，通过该元素中的 to 属性指定链接。

举个栗子

<router-link to="/Dodgerblue">Dodgerblue</router-link>

注：

你可以使用 a 元素代替 router-link 元素，但并不推荐这么做。使用 router-link 而不是 a 元素可以使你获得来自 vue-router 的更多帮助。

router-view

与路由匹配的组件将替换 router-view 元素。你可以把该元素放在任何位置以适应你的布局。

配置路由插件

如果你使用类似 Vue CLI 等类似工具构建了 Vue 项目，请在 src 路径下创建 router 文件夹，并在该文件夹中创建 index.js 文件，该文件将用于对路由插件进行配置。

基本结构

// 导入 VueJS
import Vue from 'vue';
// 导入 vue-router
import VueRouter from 'vue-router';

// 注册插件
Vue.use(VueRouter);

// 创建路由对象
const router = new VueRouter();

// 将路由对象进行导出
export default router;

子组件

在组件的动态切换的过程中，我们将使用到如下组件：

Doderblue.vue

<template>
  <div class="box"></div>
</template>

<script>
export default {

}
</script>

<style scoped>
  .box{
    width: 150px;
    height: 150px;
    background-color: dodgerblue;
  }
</style>

Pink.vue

<template>
  <div class="box"></div>
</template>

<script>
export default {

}
</script>

<style scoped>
  .box{
    width: 150px;
    height: 150px;
    background-color: pink;
  }
</style>

YellowGreen.vue

<template>
  <div class="box"></div>
</template>

<script>
export default {

}
</script>

<style scoped>
  .box{
    width: 150px;
    height: 150px;
    background-color: yellowgreen;
  }
</style>

导入需要进行路由匹配的组件

// 导入需要建立映射关系的路由
import Dodgerblue from '@/components/Dodgerblue.vue';
import Pink from '@/components/Pink.vue';
import YellowGreen from '@/components/YellowGreen.vue';

定义路由规则

我们需要为路由与组件建立映射规则，你可以通过如下方式进行路由规则的建立。

// 创建路由对象
const router = new VueRouter({
    // 定义路由规则
    routes: [
        {path: '/Dodgerblue', component: Dodgerblue},
        {path: '/Pink', component: Pink},
        {path: '/YellowGreen', component: YellowGreen}
    ]
});

其中：

项目	描述
path	用于指定路由。
component	用于指定与该路由建立映射关系的组件。

代码整合

vue-router 的配置文件中的内容最终如下：

// 导入 VueJS
import Vue from 'vue';
// 导入 vue-router
import VueRouter from 'vue-router';

// 注册插件
Vue.use(VueRouter);

// 导入需要建立映射关系的路由
import Dodgerblue from '@/components/Dodgerblue.vue';
import Pink from '@/components/Pink.vue';
import YellowGreen from '@/components/YellowGreen.vue';

// 创建路由对象
const router = new VueRouter({
    // 定义路由规则
    routes: [
        {path: '/Dodgerblue', component: Dodgerblue},
        {path: '/Pink', component: Pink},
        {path: '/YellowGreen', component: YellowGreen}
    ]
});

// 将路由对象进行导出
export default router;

挂载路由

在对 vue-router 插件配置完成后，我们需要对该插件进行挂载。

import Vue from 'vue'
import App from './App.vue'
// 导入插件的配置文件 index.js
import Router from './router/index.js'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  // 对插件进行挂载
  router: Router
}).$mount('#app')

注：

如果进行模块化导入时，指向的路径为一个文件夹，则将自动读取该文件夹下的 inde.js 文件。故可以通过如下方式 导入插件的配置文件 index.js 。

import Router from './router'

或：

import Router from './router/'

主逻辑

App.vue

<template>
  <div class="container">
    <div class="controller">
      <!-- 
        使用 router-link 元素定义路由，
        该元素的 to 属性可用于指定链接。
      -->
      <router-link to="/Dodgerblue">Dodgerblue</router-link>
      <router-link to="/Pink">Pink</router-link>
      <router-link to="/YellowGreen">YellowGreen</router-link>
    </div>
    <!-- 与路由相匹配的组件将替代 router-view 元素 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {

}
</script>

// 为 style 添加 scoped 属性
// 防止出现样式冲突问题。
<style scoped>
  /* 使用深度选择器 >>> 选中组件中的 a 元素 */
  >>> a{
    text-decoration: none;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    display: inline-block;
    width: 100px;
    height: 30px;
    background-color: #f40;
    margin-right: 8px;
    margin-bottom: 15px;
    border-radius: 3px;
    text-align: center;
    line-height: 30px;
  }
</style>

执行效果

重定向

从执行效果来看，在我们访问网站首页时访问的并不是首页链接 http://localhost:8080/，而是 http://localhost:8080/#/ 。
http://localhost:8080/#/ 是使用插件 vue-router 造成的结果。在使用该插件后，访问页面首页链接将自动进行跳转。

通过定义路由规则，我们也可以自定义路由的重定向功能。接下来，我们将通过定义路由规则使得访问首页后跳转到链接 http://localhost:8080/#/Dodgerblue。

请将路由插件配置文件 index.js 中的对应内容替换为如下内容

// 创建路由对象
const router = new VueRouter({
    // 定义路由规则
    routes: [
        {path: '/Dodgerblue', component: Dodgerblue},
        {path: '/Pink', component: Pink},
        {path: '/YellowGreen', component: YellowGreen},
        // 添加路由规则实现路由重定向功能
        {path: '/', redirect: '/Dodgerblue'}
    ]
});

其中：

项目	描述
path	指定需要进行重定向的路径。
redirect	指定重定向后需要跳转到的路径。

执行效果

更换相应内容后重新执行 Vue 项目，你将得到如下效果：