Vue route部分简单高级用法

一改变页面title的值
   在开发时常常需要在切换到不同页面时改变浏览器的title值,那么我们就可以在定义路由的时候通过配置 meta 属性

  来改变title值。

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import UserInfo from ".././userInfo.vue";
import ChangeCommunity from ".././ChangeCommunity.vue";
var vueRouter= new Router({
routes: [
    {
   path: '/',
   name: 'UserInfo',
        component: UserInfo,
        meta: {
          title: '我的信息'
        }
      },
      {
          path: '/ChangeCommunity',
          name: 'ChangeCommunity',
          component: ChangeCommunity,
          meta: {
            title: '我的社区'
          }
        },
  
]
})
vueRouter.beforeEach((to, from, next) => {
/* 路由发生变化修改页面title */
if (to.meta.title) {
document.title = to.meta.title;
}
next();
})
export default vueRouter
当从我的信息页面跳转到我的社区页面时,对应的title值也会由“我的信息”变成“我的社区”。
 
二路由懒加载
   当项目页面比较多时,初始化时候加载所有页面路由,性能十分差,这时候就可用懒加载,要渲染那个页面就加载那个页面。
 例如:
  {
          path: '/ChangeCommunity',
          name: 'ChangeCommunity',
          component: ChangeCommunity,
          resolve
   },
   还可以
 {
          path: '/ChangeCommunity',
          name: 'ChangeCommunity',
          component: resolve=>require(['ChangeCommunity'],resolve)
   },
  两种写法都可以。
三 滚动行为
    使用前端路由,当切换到新路由时,想要页面滚到顶部,或者是保持原先的滚动位置,就像重新加载页面那样。
    vue-router 能做到,而且更好,它让你可以自定义路由切换时页面如何滚动。
    注意:这个功能只在支持 history.pushState 的浏览器中可用。
   例如:
  const router = new VueRouter({
  routes: [...],
scrollBehavior (to, from, savedPosition) {
  if (savedPosition) {
      return savedPosition//滚动到指定位置
   } else {
  return { x: 0, y: 0 }
   }
 } })
“滚动到锚点”的行为:
scrollBehavior (to, from, savedPosition) {
if (to.hash) {
return {
selector: to.hash
}
}
}

异步滚动
scrollBehavior (to, from, savedPosition) {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve({ x: 0, y: 0 })
}, 500)
})
}
   
上一篇:《Java从入门到放弃》JavaSE入门篇:异常


下一篇:C#ShowCursor光标的显示与隐藏