Vue3實戰(zhàn)學習配置使用vue?router路由步驟示例

更新時間：2022年06月30日 10:52:45 作者：天問

這篇文章主要為大家介紹了Vue3實戰(zhàn)學習配置使用vue?router路由步驟示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

引言

隨著Vue版本的升級，Vue 2.x項目和Vue 3.x項目在使用vue-router上有些區(qū)別，本文就簡單介紹下vue-router在Vue3中的配置和使用。

一、目錄結(jié)構(gòu)

demo/
    package.json
    vite.config.js
    index.html
    public/
    src/
        api/
        assets/
        common/
        components/
        store/
        views/
            home.vue
            list.vue
        router/
            index.js
        App.vue
        main.js

二、版本依賴

vite: ^2.0.0
vue: ^3.2.8
vue-router: ^4.0.1

三、配置路由

3-1.配置src/router/index.js路由文件

// src/router/index.js
import {createRouter, createWebHistory, createWebHashHistory} from 'vue-router'
import { defineAsyncComponent } from 'vue'
const router = createRouter({ 
  // history: createWebHashHistory(),  // hash 模式
  history: createWebHistory(),  // history 模式
  routes: [
    {
      path: '/',
      name: 'home',
      component: defineAsyncComponent(() => import(`../views/home.vue`)),
      meta: {
        title: '首頁',
      },
    },
    {
      path: '/list',
      name: 'list',
      component: defineAsyncComponent(() => import(`../views/list.vue`)),
      meta: {
        title: '列表頁',
      },
    },
    {
      path: '/*',
      redirect: '/',
    },
  ]
})
// 全局路由守衛(wèi)
router.beforeEach((to, from, next)=>{
  // console.log(to, from)
  if (to.meta.title) {
    document.title = `${to.meta.title}`;
  }
  next()
})
router.afterEach((to, from)=>{
  // console.log(to, from)
  console.log('afterEach')
})
export default router

說明：

路由模式：
history模式對應(yīng)createWebHistory()方法
hash模式對應(yīng)createWebHashHistory()方法
路由懶加載：在vite+Vue3項目中使用import()會有報錯，所以使用vue提供的一個方法defineAsyncComponent，詳見另一篇：vue3 + vite實現(xiàn)異步組件和路由懶加載
3-2.在src/main.js入口文件中注冊使用路由

// src/main.js
import { createApp } from 'vue'
import router from './router'
import store from './store'
import App from './App.vue'
// ...
const app = createApp(App)
app.use(router).use(store);
app.mount('#app')

3-3.在src/App.vue文件中使用<router-view/>

// src/App.vue
<template>
  <router-view/>
</template>

四、使用路由

4-1.在Option API中使用和Vue 2.x中使用沒有差別。如下：

<template>
  <div></div>
</template>
<script>
  export default {
    data() {
      return {}
    },
    mounted() {
      // 路由跳轉(zhuǎn) && 設(shè)置參數(shù)
      this.$router.push({
        path: '/list',
        query: {
          id: 123,
        },
      })
      // 獲取參數(shù)
      let { id } = this.$route.query
    },
  }
</script>

4-2.在Composition API中不能再直接訪問 this.$router 或 this.$route，所以要使用 useRouter 和 useRoute 函數(shù)。

<template>
  <div></div>
</template>
<script>
  import { ref } from 'vue'
  import { useRouter, useRoute, onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
  import ajax from "./ajax";
  export default {
    setup () {
      const router = useRouter()
      const route = useRoute()
      // 路由跳轉(zhuǎn) && 設(shè)置參數(shù)
      router.push({
        path: '/list',
        query: {
          id: 123,
        },
      })
      // 獲取參數(shù)
      let { id } = route.query
      // 局部路由守衛(wèi)
      onBeforeRouteLeave((to, from) => {
        const answer = window.confirm(
          '是否要離開本頁面？'
        )
        // 取消導航并停留在同一頁面上
        if (!answer) return false
      })
      const userData = ref()
      onBeforeRouteUpdate(async (to, from) => {
        //僅當 id 更改時才獲取用戶，例如僅 query 或 hash 值已更改
        if (to.params.id !== from.params.id) {
          userData.value = await ajax(to.params.id)
        }
      })
    },
  }
</script>

以上就是Vue3實戰(zhàn)學習配置使用vue router路由步驟示例的詳細內(nèi)容，更多關(guān)于Vue3配置vue router路由的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: