45. Vue路由vue-router的基本使用
45. Vue路由vue-router的基本使用
前言
在使用vue-router之前，首先要认识一下前端路由和后端路由的区别概念。
什么是路由
- 后端路由:对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源； 例如：https://www.ximalaya.com/my/subscribed/
- 前端路由:对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现； 例如：https://www.ximalaya.com#/my/subscribed/ ，注意请求路由前面带上了hash(#号)
- 在单页面应用程序中，这种通过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 buildvue-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
将下载的vue-router.js 放入项目本地文件夹下：
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的路径增加了#号，如下：
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的路由对象，用来设置组件与前端路由的规则
<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
- 访问
#/register
好了，写到这里可以看到根据不同的哈希路由，就可以展示不同的组件内容。
6.写两个a标签用来切换组件
上面是直接在浏览器上修改url地址的hash路径，下面写两个a标签来设置。
按照我们已经开发习惯，a标签的链接基本设置为/login 和 /register，那么下面打开浏览器看看，能否正常跳转组件，如下：
可以看到在a标签直接设置跳转/login是无法正常前端跳转的。因为/login没有带#是不能访问到的。
给两个请求路径增加#，如下：
打开浏览器点击a标签，如下：
此时能够正常显示路由对应的组件了。但是，难道每次设置链接的时候都要写一个#号吗？ 感觉挺麻烦的。有没有更好的写法呢？
当然有，下面来介绍一下router-link的使用。
router-link 的基本使用
为了不用像上面那些写a标签的跳转链接加上一个#号，vue框架提供了一个超链接标签router-link，怎么用？下面来看看。
7.写两个router-link实现a标签的跳转功能
<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设置跳转的路径并不需要写一个#号在前面。
打开浏览器查看一下效果，如下：
可以从上面看到router-link默认会自动渲染为a标签，那么如果不想渲染为a标签，能否渲染为其他html标签呢？这个是可以的。
8.将router-link使用tag属性渲染为span标签
打开浏览器查看如下：
可以看到渲染为了一个span标签，那么能否点击切换组件呢？
当点击注册，则会跳至对应的组件，并且自动设置选中的class类router-link-exact-active router-link-active，而这种类其实就是可以用来做一下选中的样式变化的，这里先不深入。
那么下面点击登陆这个span也是可以跳转组件的，如下：
说明router-link不管被渲染为什么html标签，都具有跳转页面的效果。
重定向rediect的使用
1.存在的根路径问题
那么能不能让访问 #/ 路径的时候，直接访问登陆组件的内容呢？
2.设置/路径显示登陆组件
这样通过设置两个path路径指向组件login, 那么则可以显示登陆组件的内容，如下：
这样写虽然可以显示登陆组件，但是两个路径去指向的话，感觉就不太好。那么此时就要使用路径重定向的功能了。
3.使用rediect设置重定向
{ path: '/', redirect: '/login' },浏览器当访问/路径的时候，自动跳至/login，如下：
当按下回车，访问路径，如下：
router-link设置高亮显示
在日常的菜单中，一般都会对选中的菜单设置高亮的效果，表示已经选中了这个菜单，那么在router-link中该如何设置这个效果呢？
首先来看看router-link选中之后，会有什么东西？
可以看到，当被点击选中过，就会自动设置一个class为router-link-exact-active router-link-active, 那么就可以通过这设置的类来写样式，用来体现高亮的效果。
1.给router-link-active类设置选中的样式
<style>
.router-link-active{
color: #0056B3;
font-weight: 700;
text-decoration: none;
}
</style>在浏览器显示如下：
可以从上面看到，通过设置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来进行配置，如下：
// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
var router = new VueRouter({
routes, // (缩写) 相当于 routes: routes
linkActiveClass: "myactive", // 自定义选中的class
})在上面设置好了选中的自定义class为myactive，打开浏览器确认如下：
可以看到显示为 myactive
4.设置自定义的class类样式效果
浏览器显示效果如下：
可以看到已经达到自定义class的选中样式效果了。
为路由切换增加动画效果
上面已经写好了路由的基本使用，那么现在再来一个动画效果。
1.使用transition包括router-view，并且设置动画的mode为out-in
2.设置动画的样式
3.浏览器显示的效果
可以看到组件先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>