Vue中使用vue-router的妙用詳解

Vue是目前最熱門的前端框架之一，它不僅簡潔易用，而且具有強大的擴充性，其中一個值得關注的外掛就是vue-router。 vue-router是Vue官方路由插件，它可以更好地控制Vue應用中的路由導航，使路由與元件之間的關係更加清晰，提升了使用者的互動體驗。本文將詳細解讀Vue-router的使用方法及妙用。

一、安裝和使用

在使用vue-router之前，需要先安裝它。可以使用npm套件管理器來安裝vue-router插件。安裝指令如下：

npm install vue-router

安裝完成之後，在main.js檔案中引入並使用vue-router：

import VueRouter from 'vue-router'
import routes from './router'

const router = new VueRouter({
      routes
})

new Vue({
      el: '#app',
      router,
      render: h => h(App)
})

其中，routes參數指定路由配置，可以根據專案需求進行修改。然後在Vue實例化物件中傳入router參數，啟用路由功能。

二、基礎設定

路由設定包含路由表和路由元件兩個部分。路由表主要用於配置路由路徑和對應的元件，路由元件是對應路由路徑的元件視圖。

在src目錄下建立router.js文件，定義路由表和元件。如下：

import Home from './views/Home.vue'
import About from './views/About.vue'

export default [
    {
        path: '/',
        name: 'home',
        component: Home
    },
    {
        path: '/about',
        name: 'about',
        component: About
    }
]

然後在main.js中引入路由配置，並傳入VueRouter實例中。其中，路由路徑使用path屬性進行配置，component屬性指定對應的路由元件。

三、參數傳遞

Vue-router也支援傳遞參數，可以透過$route物件取得到傳遞的參數。

1. 路徑傳參

路徑傳參是指將參數放在路由路徑的一部分，例如：

{
  path: '/user/:userId',
  name: 'user',
  component: User
}

當使用者存取/user/ 1時，路由會將1作為參數userId傳遞給User組件。

2. 查詢參數傳參

查詢參數傳參是指將參數以鍵值對的形式放在路由路徑後，以問號?分隔，連續的鍵值對用&連接，例如：

{
  path: '/user',
  name: 'user',
  component: User
}

當使用者存取/user?id=1&name=john時，路由會將{id: 1, name: 'john'}作為查詢參數傳遞給User元件。

四、重定向與巢狀路由

1. 重定向

重定向是指將使用者在瀏覽器中存取某個路徑時，自動跳到另一個路徑。如下程式碼實作了路徑/about自動跳到路徑/home的功能：

import Home from './views/Home.vue'
import About from './views/About.vue'

export default [
  {
    path: '/',
    redirect: '/home'
  },
  {
    path: '/home',
    name: 'home',
    component: Home
  },
  {
    path: '/about',
    redirect: '/home'
  }
]

2. 巢狀路由

巢狀路由是指在父元件中使用子組件的路由。例如，在頭部和底部為固定結構的頁面中，需要嵌套「內容」元件，三層結構看起來是這樣的：

header
 / 
L   R
    |
content
    |
footer

嵌套路由需要在父元件內部使用標籤來佔位，並在父元件的路由表內部定義子路由表。例如：

const home = {
  template: `
    <div>
      <h2 id="Home">Home</h2>
      <router-view></router-view>
    </div>
  `
}

const about = {
  template: '<div>About</div>'
}

const contact = {
  template: '<div>Contact</div>'
}

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home,
      children: [
        {
          path: 'about',
          name: 'about',
          component: about
        },
        {
          path: 'contact',
          name: 'contact',
          component: contact
        }
      ]
    }
  ]
})

在home元件中使用了標籤作為子元件「about」和「content」的佔位符。在路由表中，父元件「home」配置的子路由表中包含了「about」和「content」兩個子路由路徑。

五、路由守衛

1. 全域守衛

全域守衛會在路由切換前觸發，其中beforeEach()為全域前置守衛，可以進行權限驗證、登陸驗證等操作。

router.beforeEach((to, from, next) => {
  // 验证用户是否登陆 
  if(to.path === '/login') {
    next();
  } else {
    let token = localStorage.getItem('token');

    if(token === null || token === '') {
      next('/login');
    } else {
      next();
    }
  }
})

全域後置守衛用於路由切換後觸發，用於處理頁面載入的進度條等操作。

2. 路由獨享守衛

路由獨享守衛用於針對某個路由做出特定的處理，在路由配置中新增beforeEnter屬性定義即可。

const router = new VueRouter({
  routes: [
    {
      path: '/admin',
      name: 'admin',
      component: admin,
      beforeEnter: (to, from, next) => {
        // 验证是否为管理员账户
        let token = localStorage.getItem('token');
        if(token === 'admin') {
          next();
        } else {
          next('/');
        }
      }
    }
  ]
})

3. 元件內守衛

元件內守衛主要用於對目前元件進行處理。包括：beforeRouteEnter，beforeRouteUpdate和beforeRouteLeave三個守衛函數。

beforeRouteEnter函數在元件進入之前觸發，在該函數中無法直接存取元件實例，但可以透過next回呼函數傳遞元件實例進行處理。

export default {
  data () {
    return {
      user: {}
    }
  },
  beforeRouteEnter (to, from, next) {
    axios.get(`/api/user/${to.params.id}`).then(response => {
      next(vm => vm.setUser(response.data.user))
    })
  },
  methods: {
    setUser (user) {
      this.user = user
    }
  }
}

beforeRouteUpdate函數由於元件之間的路由跳轉不會重新建立實例，因此需要使用beforeRouteUpdate函數進行處理。

export default {
  watch: {
    '$route' (to, from) {
      // 对路由变化作出响应...
    }
  },
  beforeRouteUpdate (to, from, next) {
    // react to route changes...
    // don't forget to call next()
  }
}

beforeRouteLeave函數在元件即將離開時觸發，用於處理未儲存的表單資料等操作。

export default {
  beforeRouteLeave (to, from, next) {
    // 如果表单已保存或者页面没有修改，直接离开该页面
    if (this.saved || window.confirm('尚未保存，确定要离开吗？')) {
      next()
    } else {
      next(false)
    }
  }
}

六、總結

使用vue-router外掛程式可以為Vue應用程式中的路由導航提供強大的控制能力，從而提升使用者的互動體驗。本文介紹了vue-router的基礎配置、參數傳遞、重定向和嵌套路由及路由守衛等功能，可以幫助開發者更好地使用vue-router插件。

以上是Vue中使用vue-router的妙用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！