Vue實戰之Router路由

路由跳轉方式

// 字符串
router.push('/')

//  含路徑的對象
router.push({ path: '/' })

//  含命名的對象
router.push({ name: 'Home' })

//  含參數和查詢參數的對象
router.push({ params: { id: 1 }, query: { page: 1 } })

當 <router-link> 被點擊後，to 的值就會傳到 router.push()，所以 to 的值有以下相應的寫法：

<!-- 字符串 -->
<router-link to="/">Home</router-link>

<!-- 含路徑的對象 -->
<router-link :to="{ path: '/' }">Home</router-link>

<!-- 含命名的對象 -->
<router-link :to="{ name: 'Home' }">Home</router-link>

<!-- 含參數和查詢參數的對象 -->
<router-link :to="{ params: { id: 1 }, query: { page: 1 } }">Home</router-link>

路由守衛

// 組件內的路由導航守衛
beforeRouteEnter(to, from, next) {
  // 路由的名稱，對應路由配置中的 name
  const fromName = from.name

  // 確認導航
  next(vm => {
    // 通過 vm 參數訪問組件實例，已登錄時，評估路由名稱
    if (vm.$store.state.auth) {
      switch (fromName) {
        // 如果從註冊頁面跳轉過來
        case 'Register':
          // 顯示註冊成功
          vm.showMsg('註冊成功')
          break
      }
    }
  })
}
/*
beforeRouteEnter 是組件內的路由導航守衛，在確認渲染該組件的對應路由前調用。該守衛不能訪問 this，但我們通過傳一個回調給 next，就可以使用上面的 vm 來訪問組件實例。守衛的參數說明如下：

to：即將要進入的目標路由；
from：當前導航正要離開的路由，from.name 是路由的名稱，對應路由配置中的 name；
next：一個用來 resolve 當前鉤子的方法，需要調用該方法來確認或者中斷導航；
參數 to 和 from 都是 路由對象 （route object），表示當前激活的路由的狀態信息，其常用的屬性有：

name：路由的名稱，如 'Register'；
path：路由的路徑，如 '/auth/register'；
params：路由參數對象，如 { id: "1" }；
query：URL 查詢參數對象，如 { page: "1" }；
meta：元信息對象，如 { auth: true }；
*/

全局前置守衛

router.beforeEach((to, from, next) => {
  // 獲取倉庫裏的登錄信息
  const auth = router.app.$options.store.state.auth

  if (auth && to.path.indexOf('/auth/') !== -1) {
    // 如果當前用戶已登錄，且目標路由包含 /auth/ ，就跳轉到首頁
    next('/')
  } else {
    next()
  }
})
/*
使用 router.beforeEach 註冊一個全局前置守衛，它在導航被觸發後調用，我們可以通過跳轉或取消的方式守衛導航，參數我們上面介紹過；
使用 router.app 可以獲取 router 對應的 Vue 根實例，使用實例的 $options.store 可以從選項中訪問倉庫；
使用 next('/') 或者 next({ path: '/' }) 來跳轉到一個新的地址；
*/

配置路由

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
	{
		name:'',
		path:'',
		component:() => import(),
	}
];

const router = new Router({
	mode:'hash/history',
	linkExactActiveClass: 'active',
	routes,
})
//linkExactActiveClass 的值是一個類名，用來添加到與當前路由對應的 <router-link> 上，以顯示當前精確激活的 <router-link>，
其默認值是 'router-link-exact-active'，我們這裏改爲 'active' 以利用 Bootstrap 的激活樣式。

子路由

{
  path: '/users/1/edit',
  component: () => import('@/views/users/Edit.vue'),
  children: [
    {
      path: '',
      name: 'EditProfile',
      component: () => import('@/views/users/Profile.vue'),
      // auth 爲 true，標識當前路由需要登錄才能訪問
      meta: { auth: true }
    }
  ]
},
/*
Profile.vue 作爲 Edit.vue 的嵌套子頁面，我們需要在父級添加 children 選項以指定子路由的配置；
子路由的 path 爲空值 ''，表示該頁面作爲默認子路由，在導航到父級路由（/users/1/edit）時，就開始加載；
使用 meta 選項配置路由的元信息，其值可以是任意類型的數據，我們可以從路由對象中訪問該值，如 to.meta.auth；
注：如果當前路由含有默認子路由，則不需要爲當前路由指定 name，要導航到當前路由，可以使用默認子路由的 name，如 router.push({ name: 'EditProfile' })
*/