vue 用 vue-cli 创建项目 会主动生成route-index.js
1，vue-Route 的使用
main.js
import router from './router' 引入router配置
new Vue({
el:'#app',
router, //注册router 到 Vue 实例中，我们可以看到APP是根组件，所以App 组件内部会有路由功能
components:{App},
template:'
})
src-router-index.js里注册路由
import Vue from 'vue'
import Router from 'vue-router' //引入路由组件
import home from './views/index'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: home //第一种注册方式
},{
path:'/head',
name:'head',
component:()=>import('@/view/city/city') //第二种注册方式
}
]
})
2，路由的调转
this.$router.push('/')
this.$route.push({name:'head'})
路由的get 方式
this.$router.push({name:'routername',query:{id:xxx}})
this.$router.push({path:'/'},params:{XXX:XXX})
路由的post方式传值
this.$router.push({name:'routername',params:{id:xxx}})
路由的后退
this.$router.go(-1)
this.$router.back()
路由的前进
this.$router.forward()
替换当前路由，在路由历史中不会再出现该路由
this.$router.replace(location)
当前路由的对象属性(一定要记得是小写的$route，并且没有r)
this.$route.path 当前路由路径 path
this.$route.name 当前路由名称
this.$route.params.id post方式传参时，获取id的值
this.$route.query.id get方式传参时获取id的值
this.$route.hash 当前路由的hash值，带#
// 解决路由返回之后页面位置问题 始终回到最顶部
scrollBehavior (to, from, savedPosition) {
return { x: 0, y: 0 }
}
链接：https://www.jianshu.com/p/798268fb802e
全部的路由钩子函数（导航首位）
11.1router.beforeEach 全局前置首位 (路由跳转前验证登录)
const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
// ...
})
to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
链接：https://www.jianshu.com/p/4c8358f73e03
11.2router.beforeResolve 全局解析守卫
11.3router.afterEach 全局后置守卫
11.4beforeEnter 路由独享守卫
组件内守卫
11.5beforeRouterEnter 进入
11.6beforeRouterUpdate 更新
11.7beforerouteLeave 离开
/*全局前置守卫*/
router.beforEach(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()
}
/*进入*/
beforeRouterEnter(to,from,next){
console.log('组件内守卫进入')
next()
},
/*更新*/
beforeRouterUpdate(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.全局后置守卫