vue路由插件之vue-route
vue路由插件，vuerRouter,使vue官方的路由管理其，和vue高度耦合
1.vue-Router的使用
importVuefrom'vue'
importRouterfrom'vue-router'//引入路由组件
Vue.use(Router)
newRouter({
mode:'history',//路由的两种模式hash和history默认使history模式
routes:[
{
path:'/',
name:'home',
component:()=>import(xxx.vue)
},
{
path:'/about',
name:'about',
component:()=>import()
}
]
})
2.路由的跳转
this.$router.push('/path')
this.$router.push({name:'routername'})
路由的get方式传值
this.$router.push({name:'routername',query:{id:xxx}})
路由的post方式传值
this.$router.push({name:'routername',params:{id:xxx}})
3.路由的后退
this.$router.go(-1)
this.$router.back()
4.路由的前进
this.$router.forward()
5.替换当前路由，在路由历史中不会再出现该路由
this.$router.replace(location)
6.当前路由的对象属性(一定要记得是小写的$route，并且没有r)
this.$route.path 当前路由路径path
this.$route.name 当前路由名称
this.$route.params.id post方式传参时，获取id的值
this.$route.query.idget方式传参时获取id的值
this.$route.hash当前路由的hash值，带#
7.linkActiveClass
当前激活的路由的class类名，默认是"router-link-active"
8.scrollBehavior
切换路由时页面滚动到具体位子
9.router-link中的tag标签，生成具体的标签的html元素
10.router-view路由组件具体渲染的地方
11.全部的路由钩子函数（导航首位）
11.1router.beforeEach 全局前置首位
11.2router.beforeResolve全局解析守卫
11.3router.afterEach全局后置守卫
11.4beforeEnter路由独享守卫
组件内守卫
11.5beforerouteEnter进入
11.6beforerouteUpdate 更新
11.7beforerouteLeave离开
/*全局前置守卫*/
router.beforeEach(function(to,from,next){
//to将要进路的路由route
//from离开的路由route
//next进入下一个路由，不调用则不会进入下一个路由
console.log('全局前置守卫')
next()
})
/*全局解析守卫*/
router.beforeResolve((to,from,next)=>{
//to将要进路的路由route
//from离开的路由route
console.log('全局解析守卫')
next()
})
/*全局后置守卫*/
router.afterEach((to,from)=>{
//to将要进路的路由route
//from离开的路由route
console.log('全局后置守卫')
})
/*组件独享守卫*/
beforeEnter(to,from,next){
console.log('组件内独享守卫')
next()
}
beforeRouteEnter(to,from,next){
console.log('组件内守卫进入')
next()
},
beforeRouteUpdate(to,from,next){
console.log('组件内守卫更新')
next()
},
beforeRouteLeave(to,from,next){
console.log('组件内守卫离开前')
next()
}
执行顺序，
1.前组件内守卫离开
2.全局前置守卫
3.路由独享守卫
4.组件内守卫进入
5.全局解析守卫
6.全局后置守卫
或者时刷新组件时（/about跳转到/about?id=1111）
1.全局前置守卫
2.组件内守卫更新
3.全局解析守卫
4.全局后置守卫
总结
以上所述是小编给大家介绍的vue路由vue-route的实例代码，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧！
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。