vue中路由的简单使用

vue中路由的简单使用

一：安装我们的router插件

cnpm i -S vue-router

二：vue中路由的种类（这里列举两种，实际有三种）

1：hash路由（常用）：vue-router插件监听页面地址栏的hash值变化，来进行页面切换（hash变了，页面不会改变）
2：H5 history模式：直接切换我们的地址，这种模式需要后端支持，把所有的页面路由指向我们的index.html

vue-router为一个vue的核心插件

将router注册为一个全局的组件，引入的router为一个class类，里面需要配置我们的数据。里面有一个routes属性：为一个数组[path: , component，chileren]，mode（模式）

import Router from 'vue-router'
new Router({
	routes:[
	//重定向
	{path:,rediect:''},
	//组件
	{path:,component:}
	],
	//定义子路由,在定义子路由的时候，第一个/不能写，不然会认为是主路由
	{path:,component:,children:[]}
	mode:'hash'
})

在vue-router中定义一个路由的组件放置的地方，使用router-view来进行组件变化，亦或者使用router-link来进行组件变化，（router-link类似于a标签，需要我们自己去修改样式，所以一般不使用）

路由跳转进行，前进使用this.$router.push()，后退使用this.$router.back() 或者 this.$router.go()

三：vue中路由的传值方式

meta、params、query
meta能在路由定义、配置的时候传值，而params、query 不能在路由定义、配置的时候传值
meta、params没有办法在页面进行使用$.router.push()进行参数传递、
（特殊：params如果要在页面上传参数，可以用name属性，定义路由的时候，需要给定name属性，然后路由跳转的时候就用name属性，不用path。同时给定了name属性后，这个组件的默认子路由组件将不会显示）

query可以在页面上使用$.router.push()进行参数传递

params需要定义动态路在页面上进行参数传递，也就是在定义路由的时候，进行路由参数定义
接收参数：
在页面上this.$route.meat/query/parmas来接收参数

四：钩子函数

钩子函数是在一个事件触发的时候，在系统级捕获到了他，然后做一些操作。一段用以处理系统消息的程序。“钩子”就是在某个阶段给你一个做某些处理的机会

钩子函数： 1、是个函数或对象，在系统消息触发时被系统调用 2、不是用户自己触发的

一：路由跳转前的钩子函数（搭配mate使用，进行权限拦截）

router.beforEach(to,from,next)  //to 去哪个路由， from 来自那个路由，next 是否运行进行下一步操作