Vue3学习与实战 · 配置使用vue-router路由

随着Vue版本的升级,Vue 2.x项目和Vue 3.x项目在使用vue-router上有些区别,本文就简单介绍下vue-routerVue3中的配置和使用。

Vue3 Router

一、目录结构

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: '/',
    },
  ]
})

// 全局路由守卫
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

说明:

  • 路由模式:

    1. history模式对应createWebHistory()方法
    2. hash模式对应createWebHashHistory()方法
  • 路由懒加载:在vite+Vue3项目中使用import()会有报错,所以使用vue提供的一个方法defineAsyncComponent,详见另一篇:vue3 + vite实现异步组件和路由懒加载

  • 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文件中使用
// src/App.vue


四、使用路由

  • 4-1.在Option API中使用和Vue 2.x中使用没有差别。如下:



  • 4-2.在Composition API中不能再直接访问 this.$routerthis.$route,所以要使用 useRouteruseRoute 函数。




《Vue3学习与实战》系列

  • Vue3学习与实战 · 组件通信
  • Vue3学习与实战 · 全局挂载使用Axios
  • Vue3学习与实战 · 配置使用vue-router路由(本文)
  • Vue3学习与实战 · Vuex状态管理
  • vue3 + vite实现异步组件和路由懒加载
  • Vite+Vue3+Vant快速构建项目

欢迎访问:天问博客

你可能感兴趣的:(Vue3学习与实战 · 配置使用vue-router路由)