vue-router和

1.在new Router里面 加上
scrollBehavior(to,from,savedPosition){
if(savedPosition){
return savedPosition
}else{
return{x:0,y:0}
}
}
以上是路由跳转页面时 当前页面滚动位置被记录下来调回来的时候还是这个位置
如果当前没有滚动位置 那就 默认在 0 0 位置

2.在配置路由的时候 一些内容 还有跳转的时候参数的传递
路由中的name 可以在页面跳转的时候用to={name:‘ddd’}进行跳转
meta:{
在meta中可以写数据 例如 title 跟路由没有关系的数据一般写到meta中
不然不好拿到
}
路由下面可以放置子路由 子路由显示的数据可以根据父路由中的router-view/显示

给router-view外面包裹一层transition标签后 在再标签中用name = ‘fade’
然后在样式中定义fade 给其动画效果

可以在router里面的path后面的路径后写上/:id/这样就成了动态路由 可以在
对应的组件上面根据不同的ID渲染不同的数据如果在再router后面写上props:true
那么跳转过后 会把ID当做props传递过去也可以自定义

路由高级部分 命名视图
举例 如果想要在不同的路由下的两个不同部分显示不同内容
对于不同名称的router-view 在不同的路由下
在router.js里面的需要在对应的有不同的视图的组件下把component
改变成components:{
default:没有名字的
a:名称是a的router-view
}

路由导航守卫
可以再main.js里面通过 router.beforeEach((to,form,next)=>{
next()
})
router.beforeResolve((to,form,next)=>{
next()
})
router.afterEach((to,form,next)=>{
next()
})
这三个是路由全局守卫 每次的路由的跳转都会触发他们三个
在路由的配置 router.js里面也可以在每个路由下面增加钩子函数
beforeEnter(to,from,next){
next()
}

在组件内部也可以加钩子函数
beforeRouteEnter(to,form,next){
在这里面不可以进行跟this有关的任何操作 因为这是在组件创建之前 根本就
没有this 想要操作的话 在next里面写vm是next里面的回调就是创建完
组件要做的事情 vm=>{vm相当于this 但是要写成vm} 注意还得再router.js里面
写上props:true
next()
}
beforeRouteUpdate(to,form,next){
如果组件复用 跳转不同的路由触发还是相同的组件 只是数据不同 那么不会触发
生命周期需要用此钩子函数 或者用watch监听 但是watch监听没有那么灵活
当组件被复用时才会触发
next()
}
beforeRouteLeave(to,form,next){
控制页面离开行为的一个方式 例如用户在填写表单的时候 如果点击别的路由
需要弹出一个窗口 确定用户是否离开 如果离开就跳转 如果点击取消 就什么也不做
if(global.confirm(‘是否确定离开本页面’)){
next()
}
next()
}

在router.js里面每个路由下写上component:()=>import(‘路径’)这样就可以当路由
跳转到页面的时候才会加载数据 提高用户体验 以及性能 但是这样写会报错
需要加上一个 npm i babel-plugin-syntax-dynamic-import -D
同时需要在babeirc.js配置文件里面的plugins里面填上’syntax-dynmic-import’
修改完后 重启服务