Vue.js - 路由 vue-router 的使用详解1（安装配置、基本用法）
一、基本介绍
1，什么是 vue-router？
（1）vue-router 是 Vue 官方提供前端路由插件，借助它我们实现可以基于路由和组件的单页面应用。
（2）它与传统的页面区别在于：
- 传统的页面应用采用的是后端路由，即通过超链接来实现页面切换和跳转的。
- 而在 vue-router 单页面应用中，则是通过路径之间的切换（实际上就是组件的切换）。
2，安装配置
（1）如果我们使用 vue-cli 脚手架来搭建项目，在开始配置过程会选择是否需要安装路由，具体参考我之前的这篇文章：
（2）如果项目搭建时没有安装也没关系，可以执行如下命令手动安装：
npm install vue-router
二、基本用法
1，效果图
- 在首页面下方有个跳转链接，点击后跳转到欢迎页面。
- 由于前端路由实际上是组件的切换，所以跳转时只有下方的内容会发生变化，上面的图片保持不变。
2，样例代码
（1）这个项目的代码结构如下：
（2）在根实例 App.vue 里添加一个路由视图 <router-view> 来挂载所有的路由组件：
- 运行网页时，<router-view> 会根据当前路由动态渲染不同的页面组件。
- 而页面中的其它部分（比如本样例顶部的图片）的内容，在路由切换时，是不会发生变化的。
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
text-align: center;
}
</style>
（3）而 router/index.js 文件则是路由的核心文件。我们在这里配置各个路径对应的组件。
import Vue from 'vue'
import Router from 'vue-router'
import index from '@/components/index' //引入首页组件
import hello from '@/components/hello' //引入欢迎页组件
//Vue全局使用Router
Vue.use(Router)
export default new Router({
routes: [ //配置路由，使用数组形式
{
path: '/', //链接路径
name: 'index', //路由名称
component: index //映射的组件
},
{
path: '/hello',
name: 'hello',
component: hello
}
]
})
（4）首页组件（index.vue）中我们使用 <router-link> 组件创建一个链接，点击该链接即可跳转到欢迎页（hello.vue）
<template>
<div>
<h1>首页</h1>
<router-link to="/hello">跳转到 hello</router-link>
</div>
</template>
<script>
export default {
name: 'index',
data () {
return {
}
}
}
</script>
三、<router-link> 组件说明
1，基本介绍
（1）上面的样例中我们使用内置的 <router-link> 组件来实现页面跳转，它最终会渲染为一个 <a> 标签。
<router-link to="/hello">跳转到 hello</router-link>
（2）通过它的 to 属性可以指定需要跳转的路径，当然也可以使用 v-bind 来动态设置。
（3）使用 <router-link>，在 HTML5 的 History 模式下会拦截点击，避免浏览器重新加载页面。
2，其他属性
除了 to 属性外，<router-link> 还有一些其他常用的 prop：
（1）tag 可以指定渲染成什么标签。比如下面渲染的结果就是 <li> 而不是 <a>
<router-link to="/hello" tag="li">跳转到 hello</router-link>
（2）replace 配置后不会留下 History 记录，即导航后不能用后退键返回上一个页面。
<router-link to="/hello" replace>跳转到 hello</router-link>
（3）active-class
- 当 <router-link> 对应的路由匹配成功时，会自动给当前元素设置一个名为 router-link-active 的 class。我们通常会利用它来高亮显示当前页面对应的导航菜单项。
- 而通过设置 active-class 可以修改默认的 class 样式名称（router-link-active），不过一般情况下我们也不需要改它，使用默认就好了。
四、使用 JS 代码进行跳转
除了使用 <router-link> 进行跳转外，我们也可以借助如下几个方法在 JavaScript 里进行页面跳转。
1，this.$router.push()
我们对上面的主页面（index.vue）进行改造，改成通过点击事件跳转。
<template>
<div>
<h1>首页</h1>
<a @click="handleRouter">跳转到 hello</a>
</div>
</template>
<script>
export default {
methods: {
handleRouter() {
this.$router.push("/hello");
}
}
}
</script>
2，this.$router.replace()
该方法则类似于 <router-link> 的 replace 功能，它不会向 history 添加新记录，而是替换掉当前的 history 记录。
this.$router.replace("/hello");
3，this.$router.go()
该方法类似与 window.history.go()，在 history 记录中向前或者后退多少步，参数是整数。
//后退1页 this.$router.go(-1); //前进2页 this.$router.go(2);
