07-vue-router的使用

小满三岁啦發表於2024-05-06
Vue

vue-router使用

// npm匯入
npm install vue-router --save

// cnpm淘寶映象匯入
cnpm install vue-router --save
// 如果沒有安裝淘寶映象需要先安裝
npm install -g cnpm --registry=https://registry.npm.taobao.org

直接跳轉：this.$router

如果獲取引數，需要使用this.$route

透過router傳送資料帶引數

方式1

// 傳送
this.$router.push("/?name=小滿") // 函式中
$router.push("/?name=小滿") //檢視中直接使用

// 獲取引數
console.log(this.$route.query); // 物件

方式2

// 傳送
// 函式中
this.$router.push({
    name: "home",
    query: {name: "小滿", age: 3, hobby: "逃課"}
})

// 檢視中
// 函式中，這種就不要再檢視中使用了，太難看了
router.push({
    name: "home",
    query: {name: "小滿", age: 3, hobby: "逃課"}
})

// 獲取一樣
console.log(this.$route.query); // 物件 {name: '小滿', age: 3, hobby: '逃課'}

透過router-link傳送資料帶引數

方式1

// 傳送
<router-link :to="{path: '/?name=阿珂&age=4'}">
    <button>回首頁</button>
</router-link>

// 獲取
console.log(this.$route.query); // {name: '阿珂', age: '4'}

方式2

// 傳送
<router-link :to="{path: '/', query:{name: '阿珂', age:4, hobby: '搶人頭'}}">
    <button>回首頁</button>
</router-link>

// 獲取
console.log(this.$route.query); // {name: '阿珂', age: '4', hobby: '搶人頭'}

方式3

// router/index.js
{
    path: '/:name/:age/:hobby',
    name: 'home',
    component: HomeView
  }

// 傳送
<router-link :to="{name: 'home', params:{name: '阿珂', age:4, hobby: '搶人頭'}}">
    <button>回首頁</button>
</router-link>

// 獲取
console.log(this.$route.params); //{name: '阿珂', age: 4, hobby: '搶人頭'}

相關api

1 指的是：this.$router--->方法
2 常用的
this.$router.push(path): 相當於點選路由連結(可以返回到當前路由介面)
this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由介面)
this.$router.back(): 請求(返回)上一個記錄路由
this.$router.go(-1): 請求(返回)上一個記錄路由
this.$router.go(1): 請求下一個記錄路由

多級路由

  1. 在components下面建立對應的子元件
StoreView.vue
FishView
  1. 在router/index.js中
    1. 需要多級路由的檢視元件下面，新建一個children，對應一個陣列，陣列的內部寫上path，以及component。
    2. children內的path不需要新增斜槓。
// 匯入
import StoreView from "@/components/StoreView.vue"
import FishView from "@/components/FishView.vue"

// 寫多級路由
{
    path: '/',
    name: 'home',
    component: HomeView,
    children:[
      {
        path: 'store', 
        component: StoreView,
      },
      {
        path: 'fish',
        component: FishView,
      }
    ]
}
  1. 元件中使用
<!-- template -->
<div class="content">
    <div class="left">
        <!-- 這裡寫路徑，直接拼就可以了 -->
        <router-link to="/store"><p>峽谷商店</p></router-link>
        <router-link to="/fish"><p>摸魚技巧</p></router-link>
    </div>
    <div class="right">
        <!-- 這裡不需要寫別的 -->
        <router-view></router-view>
    </div>
</div>

別忘記註冊元件到components中

import StoreView from "@/components/StoreView.vue"
import FishView from "@/components/FishView.vue"

components: {
    StoreView,
	FishView
}

img

路由守衛

在路由守衛中，to 引數代表即將要進入的目標路由物件，from 引數代表當前導航正要離開的路由物件，next 引數是一個函式，用於確保導航成功完成。

透過to.path，可以獲取到目標路由的路徑，透過from.path可以獲取到離開的路由地址，比如從登入跳轉到首頁，那麼to.path就是/home，from.path就是/login。

一般定義在router/index.js下面，export default router之前。

const router = new VueRouter({
  routes: [...], // 定義路由規則
});

router.beforeEach((to, from, next) => {
  // 在導航觸發時呼叫
  // 可以進行一些邏輯操作，例如許可權驗證
  next(); // 必須呼叫該方法來確保導航成功完成
});

router.afterEach((to, from) => {
  // 在導航完成時呼叫
  // 可以進行一些清理操作
});

export default router

案例，需要登入後才能正常進入到指定頁面，注意這裡使用next()完成重定向即可，不需要使用this.$router.push()

router.beforeEach((to, from, next) => {
    // 如果要取的目標是登入頁面，那就讓他去吧
  if (to.path === '/login'){
    return next()
  }
  // 獲取token
  let token = window.localStorage.getItem('token')
  if (!token){
      // 如果沒有攜帶token，那就讓他去登入吧
    return next('/login') 
  }
  // 包含token正常跳轉
  next()
})

路由的兩種工作模式

路由的兩種工作模式是"hash"模式和"history"模式。它們的主要區別在於URL的表現形式和對瀏覽器歷史記錄的影響。

  • Hash 模式：

    • 在 hash 模式下，URL 中會帶有 # 符號，例如：http://www.example.com/#/home。
    • 這種模式不會向伺服器傳送請求，因為 # 後面的內容被認為是頁面內的錨點。
    • 可以相容更多的瀏覽器，但在 SEO 最佳化方面可能存在一些問題。

  • History 模式：

    • 在 history 模式下，URL 是正常的路徑形式，例如：http://www.example.com/home。
    • 這種模式會向伺服器傳送請求，需要後端配置支援，以避免在重新整理頁面或直接訪問 URL 時出現 404 錯誤。
    • 可以更加友好地展示 URL，但需要後端配合。
const router = new VueRouter({
  mode: 'history', // 這裡設定 history 或者 hash
  base: process.env.BASE_URL,
  routes
})

相關文章