1.Vue2

Vue Router是Vue.js官方的路由管理器，它能夠幫助我們?cè)赩ue應(yīng)用中實(shí)現(xiàn)頁面之間的跳轉(zhuǎn)和導(dǎo)航。在本篇博客中，我們將介紹如何在Vue 2中使用Vue Router，包括路由的配置、路由參數(shù)的傳遞和導(dǎo)航守衛(wèi)的使用。

1.安裝和配置Vue Router

首先，我們需要在Vue項(xiàng)目中安裝Vue Router。使用npm或者yarn命令進(jìn)行安裝 

npm install vue-router

安裝完成后，在Vue項(xiàng)目的入口文件（通常是main.js）中引入Vue Router并配置

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
// 創(chuàng)建路由實(shí)例并配置路由規(guī)則
const router = new VueRouter({
  routes: [
    // 路由規(guī)則配置
    // { path: '/home', component: Home }
  ]
})
// 將路由實(shí)例掛載到Vue實(shí)例上
new Vue({
  router,
  // ...其他配置
}).$mount('#app')

2.配置路由規(guī)則

在路由實(shí)例的routes配置項(xiàng)中，我們可以定義應(yīng)用的路由規(guī)則。每個(gè)路由規(guī)則由一個(gè)path和對(duì)應(yīng)的component組成，path指定了URL路徑，component指定了該路徑對(duì)應(yīng)的Vue組件。

例如，我們可以定義一個(gè)名為Home的組件，并配置對(duì)應(yīng)的路由規(guī)則

import Home from '@/components/Home'
const router = new VueRouter({
  routes: [
    { path: '/home', component: Home }
  ]
})

這樣，當(dāng)用戶訪問/home路徑時(shí)，會(huì)加載Home組件。

3.路由參數(shù)傳遞

有時(shí)候，我們需要在路由之間傳遞參數(shù)。Vue Router提供了多種傳遞參數(shù)的方式。

1.動(dòng)態(tài)路由參數(shù)

我們可以在路由規(guī)則中使用動(dòng)態(tài)參數(shù)，通過在path中使用冒號(hào)(:)來指定參數(shù)名

const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User }
  ]
})

在上述例子中，:id表示動(dòng)態(tài)參數(shù)，用戶訪問/user/123路徑時(shí)，會(huì)加載User組件，并通過this.$route.params.id獲取參數(shù)值。

2.查詢參數(shù)

另一種傳遞參數(shù)的方式是使用查詢參數(shù)。查詢參數(shù)通常用于GET請(qǐng)求中，以鍵值對(duì)的形式出現(xiàn)在URL的后面，例如：/user?id=123。

Vue Router可以通過this.$route.query來獲取查詢參數(shù)，例如

// 假設(shè)用戶訪問路徑為/user?id=123
console.log(this.$route.query.id) // 輸出：123

4.導(dǎo)航守衛(wèi)

Vue Router還提供了導(dǎo)航守衛(wèi)的功能，用于在路由切換前后執(zhí)行一些邏輯操作，例如權(quán)限驗(yàn)證、頁面加載狀態(tài)等。

常用的導(dǎo)航守衛(wèi)包括beforeEach、beforeResolve、afterEach等。我們可以在路由實(shí)例上定義這些導(dǎo)航守衛(wèi)，例如

const router = new VueRouter({
  routes: [
    // 路由規(guī)則配置
  ]
})
router.beforeEach((to, from, next) => {
  // 在路由切換前執(zhí)行的邏輯
  // 可以進(jìn)行權(quán)限驗(yàn)證等操作
  next() // 必須調(diào)用next()才能繼續(xù)路由切換
})
router.afterEach(() => {
  // 在路由切換后執(zhí)行的邏輯
})

以上是Vue 2中使用Vue Router實(shí)現(xiàn)路由功能的基本介紹，包括了安裝和配置Vue Router、路由規(guī)則的配置、參數(shù)傳遞以及導(dǎo)航守衛(wèi)的使用。通過合理的使用Vue Router，我們能夠更好地管理Vue應(yīng)用的頁面導(dǎo)航和路由跳轉(zhuǎn)。

2.Vue3

1.安裝和配置Vue Router

首先，我們需要在Vue項(xiàng)目中安裝Vue Router。使用npm或者yarn命令進(jìn)行安裝

npm install vue-router@next

安裝完成后，在Vue項(xiàng)目的入口文件（通常是main.js）中引入Vue Router并配置

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
import Home from './components/Home.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由規(guī)則配置
    { path: '/home', component: Home }
  ]
})
createApp(App).use(router).mount('#app')

2.配置路由規(guī)則

在路由實(shí)例的routes配置項(xiàng)中，我們可以定義應(yīng)用的路由規(guī)則。每個(gè)路由規(guī)則由一個(gè)path和對(duì)應(yīng)的component組成，path指定了URL路徑，component指定了該路徑對(duì)應(yīng)的Vue組件。

例如，我們可以定義一個(gè)名為Home的組件，并配置對(duì)應(yīng)的路由規(guī)則

import Home from './components/Home.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/home', component: Home }
  ]
})

 這樣，當(dāng)用戶訪問/home路徑時(shí)，會(huì)加載Home組件。

3.路由參數(shù)傳遞

有時(shí)候，我們需要在路由之間傳遞參數(shù)。Vue Router提供了多種傳遞參數(shù)的方式。

3.1 動(dòng)態(tài)路由參數(shù)

我們可以在路由規(guī)則中使用動(dòng)態(tài)參數(shù)，通過在path中使用冒號(hào)(:)來指定參數(shù)名

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/user/:id', component: User }
  ]
})

在上述例子中，:id表示動(dòng)態(tài)參數(shù)，用戶訪問/user/123路徑時(shí)，會(huì)加載User組件，并通過$route.params.id獲取參數(shù)值。

3.2 查詢參數(shù)

另一種傳遞參數(shù)的方式是使用查詢參數(shù)。查詢參數(shù)通常用于GET請(qǐng)求中，以鍵值對(duì)的形式出現(xiàn)在URL的后面，例如：/user?id=123。

Vue Router可以通過$route.query來獲取查詢參數(shù)，例如

// 假設(shè)用戶訪問路徑為/user?id=123
console.log($route.query.id) // 輸出：123

4.導(dǎo)航守衛(wèi)

Vue Router在Vue 3中仍然提供了導(dǎo)航守衛(wèi)的功能，用于在路由切換前后執(zhí)行一些邏輯操作，例如權(quán)限驗(yàn)證、頁面加載狀態(tài)等。

常用的導(dǎo)航守衛(wèi)包括beforeEach、beforeResolve、afterEach等。我們可以在路由實(shí)例上定義這些導(dǎo)航守衛(wèi)，例如

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由規(guī)則配置
  ]
})
router.beforeEach((to, from, next) => {
  // 在路由切換前執(zhí)行的邏輯
  // 可以進(jìn)行權(quán)限驗(yàn)證等操作
  next() // 必須調(diào)用next()才能繼續(xù)路由切換
})
router.afterEach(() => {
  // 在路由切換后執(zhí)行的邏輯
})

到此這篇關(guān)于Vue-Router在Vue2和Vue3中的使用的文章就介紹到這了,更多相關(guān)Vue-Router 在Vue2和Vue3使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論