45. Vue路由vue-router的基本使用

前言

在使用vue-router之前，首先要认识一下前端路由和后端路由的区别概念。

什么是路由

1. 「后端路由」:对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源；

   例如：https://www.ximalaya.com/my/subscribed/

2. 「前端路由」:对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；

   例如：https://www.ximalaya.com#/my/subscribed/ ，注意请求路由前面带上了hash(#号)

3. 在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）；

安装使用vue-router

想要知道如何安装使用vue-router，那么肯定要知道哪里查看官方文档。

vue-router官方文档：https://router.vuejs.org/zh/

vue-router安装文档：https://router.vuejs.org/zh/installation.html

根据文档，安装vue-router有以下三种方式。

直接下载 / CDN

https://unpkg.com/vue-router/dist/vue-router.js

Unpkg.com 提供了基于 NPM 的 CDN 链接。上面的链接会一直指向在 NPM 发布的最新版本。你也可以像 https://unpkg.com/vue-router@2.0.0/dist/vue-router.js 这样指定 版本号 或者 Tag。

在 Vue 后面加载 vue-router，它会自动安装的：

<script src="/path/to/vue.js"></script>
<script src="/path/to/vue-router.js"></script>

NPM

npm install vue-router

如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

如果使用全局的 script 标签，则无须如此 (手动安装)。

构建开发版

如果你想使用最新的开发版，就得从 GitHub 上直接 clone，然后自己 build 一个 vue-router。

git clone https://github.com/vuejs/vue-router.git node_modules/vue-router
cd node_modules/vue-router
npm install
npm run build

vue-router的基本使用

上面提供了三种安装方式，我采用第一种方式进行安装以及使用演示。

用 Vue.js + Vue Router 创建单页应用，是非常简单的。使用 Vue.js ，我们已经可以通过组合组件来组成应用程序，当你要把 Vue Router 添加进来，我们需要做的是，将组件 (components) 映射到路由 (routes)，然后告诉 Vue Router 在哪里渲染它们。下面是个基本例子：

1.直接下载 vue-router.js 文件到本地

在浏览器访问 https://unpkg.com/vue-router/dist/vue-router.js

image-20200217230732421

将下载的vue-router.js 放入项目本地文件夹下：

image-20200217231138391

2.按照顺序导入vue.js 以及vue-router.js库

<!-- 导入vue.js库  -->
<script src="lib/vue.js"></script>
<!-- 导入vue-router -->
<script src="lib/vue-router.js"></script>

当导入了vue-router.js库之后，打开浏览器就会发现url的路径增加了#号，如下：

image-20200218173111809

3.创建两个组件，后续用来设置前端路由进行组件展示切换

创建一个登陆以及注册的组件，如下：

		<script>		

// 创建登陆组件login
var login = {
template: "<h3>登陆组件</h3>",
			}

// 创建注册组件register
var register = {
template: "<h3>注册组件</h3>",
			}

// 创建vue的实例
var vm = new Vue({
el: '#app',
data: {},
methods:{},				
// 注册局部组件，注意：下面使用vue-router的话，不需要在这里注册组件
components:{}
			})

</script>

4.创建Vue-Router的路由对象，用来设置组件与前端路由的规则

image-20200218164603840image-20200218164632177

		<script>		

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来

// 创建登陆组件login
var login = {
template: "<h3>登陆组件</h3>",
			}

// 创建注册组件register
var register = {
template: "<h3>注册组件</h3>",
			}

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
var routes = [
			  { path: '/login', component: login },
			  { path: '/register', component: register }
			]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
var router = new VueRouter({
			  routes // (缩写) 相当于 routes: routes
			})

// 创建vue的实例
var vm = new Vue({
el: '#app',
data: {},
methods:{},				
// 注册局部组件，注意：下面使用vue-router的话，不需要在这里注册组件
components:{},
// 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
router: router, 
			})

</script>

到这里已经写好了路由组件的相关内容了，那么下面就来看看如何在app中使用。

5.在主组件app中使用router-view展示路由组件

		<div id="app">

<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

</div>

那么上面写了这个router-view的标签有什么作用呢？下面来设置#路由来看看效果。

• 访问#/login

image-20200218181306479

• 访问#/register

image-20200218181330070

好了，写到这里可以看到根据不同的哈希路由，就可以展示不同的组件内容。

6.写两个a标签用来切换组件

上面是直接在浏览器上修改url地址的hash路径，下面写两个a标签来设置。

image-20200218201215538

按照我们已经开发习惯，a标签的链接基本设置为/login 和 /register，那么下面打开浏览器看看，能否正常跳转组件，如下：

image-20200218201743334image-20200218201801950

可以看到在a标签直接设置跳转/login是无法正常前端跳转的。因为/login没有带#是不能访问到的。

给两个请求路径增加#，如下：

image-20200218202155774

打开浏览器点击a标签，如下：

image-20200218202229944image-20200218202253857

此时能够正常显示路由对应的组件了。但是，难道每次设置链接的时候都要写一个#号吗？ 感觉挺麻烦的。有没有更好的写法呢？

当然有，下面来介绍一下router-link的使用。

router-link 的基本使用

为了不用像上面那些写a标签的跳转链接加上一个#号，vue框架提供了一个超链接标签router-link，怎么用？下面来看看。

「7.写两个router-link实现a标签的跳转功能」

image-20200218213154341

		<div id="app">

<a href="#/login">登陆</a>
<a href="#/register">注册</a>

<hr>

<router-link to="/login">登陆</router-link>
<router-link to="/register">注册</router-link>

<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>

</div>

可以看到router-link设置跳转的路径并不需要写一个#号在前面。

打开浏览器查看一下效果，如下：

image-20200218213411568

可以从上面看到router-link默认会自动渲染为a标签，那么如果不想渲染为a标签，能否渲染为其他html标签呢？这个是可以的。

8.将router-link使用tag属性渲染为span标签

image-20200218215935565

打开浏览器查看如下：

image-20200218220157626

可以看到渲染为了一个span标签，那么能否点击切换组件呢？

当点击注册，则会跳至对应的组件，并且自动设置选中的class类router-link-exact-active router-link-active，而这种类其实就是可以用来做一下选中的样式变化的，这里先不深入。

image-20200218220415250

那么下面点击登陆这个span也是可以跳转组件的，如下：

image-20200218221244625

说明router-link不管被渲染为什么html标签，都具有跳转页面的效果。

重定向rediect的使用

「1.存在的根路径问题」

image-20200219213738063

那么能不能让访问 #/ 路径的时候，直接访问「登陆」组件的内容呢？

2.设置/路径显示登陆组件

image-20200219214750591

这样通过设置两个path路径指向组件login, 那么则可以显示登陆组件的内容，如下：

image-20200219214856648

这样写虽然可以显示登陆组件，但是两个路径去指向的话，感觉就不太好。那么此时就要使用路径重定向的功能了。

3.使用rediect设置重定向

image-20200219215359109

{ path: '/', redirect: '/login' },

浏览器当访问/路径的时候，自动跳至/login，如下：

image-20200219215725782

当按下回车，访问路径，如下：

image-20200219215800568

router-link设置高亮显示

在日常的菜单中，一般都会对选中的菜单设置高亮的效果，表示已经选中了这个菜单，那么在router-link中该如何设置这个效果呢？

首先来看看router-link选中之后，会有什么东西？

image-20200219223221790

可以看到，当被点击选中过，就会自动设置一个class为router-link-exact-active router-link-active, 那么就可以通过这设置的类来写样式，用来体现高亮的效果。

1.给router-link-active类设置选中的样式

image-20200219224121746

		<style>
.router-link-active{
color: #0056B3;
font-weight: 700;
text-decoration: none;
			}
</style>

在浏览器显示如下：

image-20200219224212556image-20200219224236755

可以从上面看到，通过设置router-link-active类样式，达到选中效果的变化，那么能不能自定义一个类名呢？

当然是可以的，默认情况下就是router-link-active，下面来看看如何自定义。

2.查看选中active-class的定义

访问官网查看：https://router.vuejs.org/zh/api/#tag

active-class

• 类型: string

• 默认值: "router-link-active"

  设置链接激活时使用的 CSS 类名。默认值可以通过路由的构造选项 linkActiveClass 来全局配置。

3.自定义选中的class类

从上面的定义看出了可以通过路由的构造选项linkActiveClass来进行配置，如下：

image-20200219225026594

			// 3. 创建 router 实例，然后传 `routes` 配置
			// 你还可以传别的配置参数, 不过先这么简单着吧。
			var router = new VueRouter({
			  routes, // (缩写) 相当于 routes: routes
			  linkActiveClass: "myactive", // 自定义选中的class
			})

在上面设置好了选中的自定义class为myactive，打开浏览器确认如下：

image-20200219225124102

可以看到显示为 myactive

4.设置自定义的class类样式效果

image-20200219225242125

浏览器显示效果如下：

image-20200219225303369

可以看到已经达到自定义class的选中样式效果了。

为路由切换增加动画效果

上面已经写好了路由的基本使用，那么现在再来一个动画效果。

1.使用transition包括router-view，并且设置动画的mode为out-in

image-20200219230240511

2.设置动画的样式

image-20200219230308494

3.浏览器显示的效果

image-20200219230342138

可以看到组件先out，后in的效果。

完成的实例代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 导入vue.js库  -->
<script src="lib/vue.js"></script>
<!-- 导入vue-router -->
<script src="lib/vue-router.js"></script>
<style>
.router-link-active,.myactive{
color: #0056B3;
font-weight: 700;
text-decoration: none;
			}

/* 设置动画效果 */
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(9.375rem);
			}

.v-enter-active, .v-leave-active{
transition: all 1s ease;
			}
</style>
</head>
<body>

<div id="app">

<a href="#/login">登陆</a>
<a href="#/register">注册</a>

<hr>

<router-link to="/login" tag="span">登陆</router-link>
<router-link to="/register">注册</router-link>

<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<transition mode="out-in">
<router-view></router-view>
</transition>

</div>

<script>		

// 1. 定义 (路由) 组件。
// 可以从其他文件 import 进来

// 创建登陆组件login
var login = {
template: "<h3>登陆组件</h3>",
			}

// 创建注册组件register
var register = {
template: "<h3>注册组件</h3>",
			}

// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
var routes = [
// { path: '/', component: login },
			  { path: '/', redirect: '/login' },
			  { path: '/login', component: login },
			  { path: '/register', component: register }
			]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
var router = new VueRouter({
			  routes, // (缩写) 相当于 routes: routes
linkActiveClass: "myactive", // 自定义选中的class
			})

// 创建vue的实例
var vm = new Vue({
el: '#app',
data: {},
methods:{},				
// 注册局部组件，注意：下面使用vue-router的话，不需要在这里注册组件
components:{},
// 将路由规则对象，注册到 vm 实例上，用来监听 URL 地址的变化，然后展示对应的组件
				router,  // 等价于 router: router
			})

</script>

</body>
</html>

 

交流QQ群：

 

 

 

 

 

 

 

 

点击下面，查看更多Vue系列文章