Vue-router路由
1.首先需要先引入vue-router，使用npm直接安装即可
下面是使用方法：
let componentA={
template:'#Home',
data(){
return {
msg:'主页',
arr:['javaScript','Html','Css','jquery']
}
}
}
let componentB={
template:'#New',
data(){
return {
msg:'新闻页',
arr:['张三爱打篮球','李四爱旅游','王五不喜欢跑步','丁卯爆出与女友同居3年']
}
}
}
/*配置路由*/
let routes=[
{path:'/Home',component:componentA},
{path:'/New',component:componentB},
{path:'/*',redirect:'/Home'} //重定向
];
let router=new VueRouter({
routes, //es6新写法 如果属性名与属性值的名字相同则可以省略
linkActiveClass:'active'//设置点击高亮显示 active为类名
})
/*vue实例*/
let vm=new Vue({
el:'#app',
router, //整个vue实例内使用router
data:{
msg:'路由和$set $delete实例方法'
},
methods:{
},
components:{
'home':componentA,
'new':componentB
}
})
接下来只需要在HTML中使用:
<router-link to="/Home">首页</router-link>
<router-link to="/New">新闻页</router-link>
作为跳板，router-link标签就相当于a标签 to属性就相当与a标签内的href属性。使用router-view 标签作为跳转之后显示的区域。
<router-view></router-view>
2.路由传参：
- 静态传参：
<router-link to="/Home?name=张三&age=18">首页</router-link>
/*组件中*/
<p>{{$route.query}}</p>//获取通过路由传到组件内数据
- 动态传参：
<router-link :to="'/New/'+info">新闻页</router-link>
//路由中也需要相应的配置：
{path:'/New/:info',component:componentB}, //info为父组件内的data
//获取数据：
<p>{{$route.params}}</p>
//获取数据方式2：
//在路由中配置props属性为true则组件中可以直接访问传入的动态参数
{path:'/New/:info',component:componentB,props:true}
//子组件中，可以像父子传值一样定义props值进行接收
export default{
props:['info']
}
<template>
<div>
<p>{{info}}</p>
</div>
</template>
写法2：
{
path:'/list/:id',
name:'list',
component:List,
props : (route)=>({
query:route.query.q //静态传参值
id:route.params.id //动态传参值
})
}
export default{
props:['query','id']
}
<template>
<div>
<p>{{query}} {{id}}</p>
</div>
</template>
动态路由一般可以用于实现分页效果，代码如下：
/*显示信息的组件*/
mounted(){ //生命周期，此时已经初始化了el ,并完成了渲染
if(this.$route.params.id==1){
//发送请求获得页面1的信息
}
if(this.$route.params.id==2){
//发送请求获得页面2的信息
}
}
3.路由中的方法：
- push方法：编程式导航,相当于router-link 标签的作用定义导航，并且会跳转到该路径，该方法会在history栈内添加一条记录，所以用户点击后退可以回到原来的路径页面。
可以在Header组件中跳转到list中
export defalut{
methods:{
handleClick(){
this.$router.push({
name:'list'
})
}
}
}
可以在Header组件中跳转到list/123中
export defalut{
methods:{
handleClick(){
this.$router.push({
//一种方式
//path:'/list/123',
//2种方式
name:'list'
params:{
id:123
}
})
}
}
}
使用router.push 或者 router.replace 里面都不能让path和params同时存在
若要跳转到接收了指定参数的路径页面时，则在路由中添加name属性，name属性一般与path同名，利用name 和params属性配合。(因为path和params不能同时存在)；
参数可以是以下几种：
- router.push(‘home’); 字符串 home为path名 一般是跳转到子路由
- router.push({path:’/home’}); 对象
- router.push({name:‘home’,params:{…}}); 根据路由的name属性进行跳转，同时传入动态参数(传入动态参数只能这么传)
- router.push({path:’/home’,query:{…}}); 带查询参数的对象(就是跳转的时候同时传入静态参数)
router.replace()与push的区别是，replace不会向history栈内添加记录，而是替换，所以不能退后。
4.路由导航钩子函数：
正如其名，vue-router 提供的导航钩子主要用来拦截导航，让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子：全局的, 单个路由独享的, 或者组件级的。
可以使用 beforeEach 来定义一个全局before钩子：
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
同理也可以使用afterEach定义一个全局after钩子，但是after钩子没有next方法，不能改变导航。
每个钩子方法接收三个参数：
to: Route : 即将要进入的目标 [路由对象]
from: Route : 当前导航正要离开的路由
next: Function : 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next
方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是confirmed （确认的）。
next(false): 中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from
路由对应的地址。
next(’/’) 或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
某个路由的独享钩子：
const router = new VueRouter({
routes: [
{
path: '/foo',
component: Foo,
beforeEnter: (to, from, next) => {
// ...
}
}
]
})
//to from next 参数与全局的一样
组件内的导航钩子：
最后，你可以在路由组件内直接定义以下路由导航钩子：
beforeRouteEnter
beforeRouteUpdate (2.2 新增)
beforeRouteLeave
const Foo = {
template: `...`,
beforeRouteEnter (to, from, next) {
// 在渲染该组件的对应路由被 confirm 前调用
// 不！能！获取组件实例 `this`
// 因为当钩子执行前，组件实例还没被创建
},
beforeRouteUpdate (to, from, next) {
// 在当前路由改变，但是该组件被复用时调用
// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。就是渲染同一个组件，但是参数却改变了，此时调用该方法。
// 可以访问组件实例 `this`
},
beforeRouteLeave (to, from, next) {
// 导航离开该组件的对应路由时调用
// 可以访问组件实例 `this`
}
}
注意：beforeRouteEnter方法内不能访问实例this，因为这个方法是在导航确认前，执行。而此时对应的组件并没有被创建。
不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}
你可以 在 beforeRouteLeave 中直接访问 this。这个 leave 钩子通常用来禁止用户在还未保存修改前突然离开。可以通过 next(false) 来取消导航。
路由的嵌套：
let routes=[
{path:'/Home',name:'Home',component:componentA,
children:[
{path:'first',component:componentAa},
{path:'last',component:componentAb}
]}, //子路由
{path:'/New/:info',name:'New',component:componentB,props:true},
{path:'/*',redirect:'/Home'} //重定向
];