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,next)=>{ next() }) router.afterEach((to,next)=>{ next() }) 这三个是路由全局守卫 每次的路由的跳转都会触发他们三个 在路由的配置 router.js里面也可以在每个路由下面增加钩子函数 beforeEnter(to,next){ next() }

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!