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)
  })
}