Vue-router
1、概念
什么是路由？
根据用户请求的路径来展示不同的页面或返回不同的数据
2、路由的分类
- 前端路由
- 后端路由
前端路由：
根据用户请求不同的url来展示不同的页面或者数据，前端路由是不会涉及到后端请求的，以及页面不会进行刷新，对于用户来说体验比较好，一般是用来做单页面开发( SPA )的。前端路由的底层原理：hashchange和H5的history API中的popState和replaceState来实现的
后端路由：
根据用户请求的路径来返回不用的数据或者页面，后断路由一般情况下都是用来做接口的，通过ajax请求的路径来返回相应的数据
接下来讲解自己搭建的项目如何使用 vue-router
3、vue中的路由 vue-router
3.1 安装vue-router
npm install vue-router -S
或者
yarn add vue-router -S
3.2 创建router文件夹，并在文件夹里创建index.js文件
路由的配置项：
- mode：路由的一种形式，默认是hash模式，另一种是history模式
- routes：数组，其中包含N多个对象，每一个对象都是一个路由的配置项
routes包含的属性： - path：匹配路由的路径
- component：路由路径匹配成功后显示的组件
- redirect：路由重定向
- name：命名路由
- props：路由解耦
- children：路由嵌套
- meta：路由元信息( 路由携带的一些独有信息 )
index.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Index form '../views/pages/index/Index.vue'
Vue.use(VueRouter)
let router = new VueRouter({
mode:'hash',
routes:[
{
path:'/index',
component:Index
}
]
})
export default router
在main.js里，将router挂载到Vue上
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
new Vue({
router,
render:h=>h(app)
}).$mount('#app')
此时访问index页面，还是不能进行正确的显示，是因为还没有配置完成。在将router挂载到vm实例上的时候，就会自动多出两个内置组件 router-link 和 router-view，router-link 负责进行路由的跳转，
router-view 负责渲染路由匹配的组件 （注意，需要在根组件配置一个router-view才可正确的显示）
app.vue
<template>
<div id='app'>
<router-view></router-view>
</div>
</template>
4、路由跳转方式
- 通过a标签
- 通过router-link
- 编程式导航
4.1 路由跳转之a标签
<a href = " # /index "> index </a>
<a href = " # /mine"> mine</a>
使用a标签，有一个小缺点，就是不太方便知道当前选中的是哪个值
4.2 路由跳转之 router-link
<router-link to = " / index "> index </router-link>
<router-link to = " / mine"> mine</router-link>
需要注意的是，router-link里有一个 to属性，to属性的值就是需要跳转到的路径。其实router-link写完之后，在浏览器上预览的时候，看到的本质还是一个a标签，to的值和属性就变成了a标签的href属性。但是比单纯写a标签多了一个属性，在当前选中的a标签上多了一个router-link-active,如图
如此这样，就很方便为选中的标签添加相应的样式
router-link还有一个属性为tag,就是将router-link渲染成指定的标签,例如像将其改为 li 标签，如图
<router-link tag = ' li ' to = " / index "> index </router-link>
此处，是官网router-link的详解的链接
如果初打开项目，不会进行任何展示，因为url栏里没有任何路由，所以我们需要在router文件夹的index.js里配置一个空路由，然后利用redirect重定向，来默认显示我们想要看到的页面。若果随意在地址栏里输入一撺弄我们没有配置的路由，我们还要配置一个404页面
import NotFound from ' ../views/notfound/NotFound.vue '
{
path:' / ',
redirect : ' / index '
},
{
path : ' ** ',
component: NotFound
}
5、路由传值
不同的页面间直接需要相互传递数据来进行数据的请求或者进行数据的渲染，因此需要路由传值
5.1动态路由传值
- 在定义路由的时候，在path路由处通过 /：属性的方式来定义传递参数的属性
- 在路由跳转的时候，在路径跳转处通过 / 值的方式来进行传值
- 在需要接受参数的页面，通过this.$route.params 的方式来进行接收
传值：
举例 一
import Detail form ' ../views/detail/Detail.vue'
{
path : ' / detail /:sex /:age ',
component : Detail
}
举例 二
<router-link tag = ' li ' to = " ' / detail ?sex=' + name + '&age=' +18 "> index </router-link>
接收值：
举例
在一个单文件组件里，在created生命周期里可使用this.$route.params进行接收,然后可根据接收到的值进行视图的渲染
created(){
let { sex,age} = this.$route.params;
}
5.2query传值
举例
<router-link tag = ' li ' to = " { name:' detail ' , query:{ sex:'man',age:18 } } "> index </router-link>
以上就是动态路由传值和 query传参的格式。但需要注意的是，它们之间有些区别。使用动态路由传值，这个值是必须填写的,而如果使用query的方式传值，值是非必填写的
5.3路由解耦
路由解耦只适用于动态路由
- 在定义路由的时候，在path路由处通过 /：属性的方式来定义传递参数的属性
- 在定义路由的时候，添加一个属性props为true
- 在路由跳转的时候，在路径跳转处通过 / 值的方式来进行传值
- 在需要接受参数的页面，通过props进行接收即可
传值：
举例 一
import Detail form ' ../views/detail/Detail.vue'
{
path : ' / detail /:sex /:age ',
component : Detail,
name: detail,
props：true
}
接收值：
举例
props:[ 'sex' , 'age']
5.4、编程式导航
所谓的编程式导航，也就是通过js的方式来进行跳转
在 Vue 实例内部，你可以通过 $router访问路由实例。因此你可以调用 如下方法
this.$router.push
this.$router.go
this.$router.back
this.$router. forward
this.$router.replace
前提条件，在页面触发methods里的一个方法
举例 一
this.$router.push
将当前的路由替换掉url栏的路由，并且会增加一条历史记录
handlePush(params){
this.$router.push (' /detial/'+ params)
}
举例 二
this.$router.go
指定前进/回退的步数，这里的前进后退能否执行，取决于浏览器中是否有浏览历史记录
- this.$router.go(0) 刷新当前页面
- this.$router.go(-1) 后退一步记录，等同于 history.back()，如果history 记录不够用，那就默默地失败呗
- this.$router.go(1) 在浏览器记录中前进一步，等同于 history.forward()
handleGo(){
this.$router.go(0)
}
举例 三
this.$router.back
后退一步记录
handleBack(){
this.$router.back()
}
举例 四
this.$router.forward
前进一步记录
handleForward(){
this.$router.forward()
}
举例 五
this.$router.replace
将指定的路由替换点url栏里的路由，但需要注意的是此时不会生成一条新的历史记录
handleReplace(){
this.$router.replace('/index')
}
6、嵌套路由
实际生活中的应用界面，通常由多层嵌套的组件组合而成。同样地，URL 中各段动态路径也按某种结构对应嵌套的各层组件
比如
/a
/b
/a/ab
/a/ac
/b/ba
诸如此类，那么应该如何实现路由的嵌套呢
在router文件夹index.js里修改配置
{
path:' / ',
redirect : ' / index '
},
{
path : ' /index ',
component: Index,
children:[
{
path:' /index/city',
component: City
},
{
path:' /index/search ',
component:Search
},
]
}
在index.vue里修改
<router-link tag='/index/city'>city</router-link>
<router-link tag='/index/search'>search</router-link>
<router-view'></router-view>
注意使用 router-link来路由跳转时，需要和 router-view来配对使用。将router-link跳转的内容显示在router-view里
7.路由元信息 meta
在我们进行限权的时候，如果要意义判断是从哪个路由地址跳转到此路由，无疑是很繁琐的。那么有没有一个比较简单易操作的方法呢？
我们可以直接在路由配置的时候，给每个路由添加一个自定义的meta对象，在meta对象中可以设置一些状态，来进行一些操作。用它来做校验再合适不过了
举例
{
path: '/active',
name: 'Active',
component: Active,
meta: {
login_require: false
},
{
path: '/goodslist',
name: 'goodslist',
component: Goodslist,
meta: {
login_require: true
},
这里我们只需要判断item下面的meta对象中的login_require是不是true，就可以做一些限制了
router.beforeEach((to, from, next) => {
if (to.matched.some(function (item) {
return item.meta.login_require
})) {
next('/login')
} else
next()
})
