文章目录

参考
描述
Vue Router
- 获取
- - npm
  - yarn
  - 依赖问题
使用
- router-link
- router-view
- 配置路由插件
- - 基本结构
  - 子组件
  - 导入需要进行路由匹配的组件
  - 定义路由规则
  - 代码整合
- 挂载路由
- 主逻辑
- 执行效果
- 重定向

参考

项目	描述
搜索引擎	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 = falsenew 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'}]
});