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