vue3的路由(vue-router@4XX)版本的使用

最新推荐文章于 2025-01-15 19:15:10 发布

原创最新推荐文章于 2025-01-15 19:15:10 发布 · 1.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

vue3 vue-router4xx 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在Vue3中迁移和设置路由，包括安装对应版本、创建和引入路由、避免常见错误及页面导入技巧。重点讲解了4.0版本的vue-router及其不同模式的使用。

前提：最近学习vue3 对应的路由也随之升级

vue2 对应的路由在vue3中使用会出问题，所以学习vue3时对应的路由创建引入也需要进行变化

1 安装版本（后续小版本还会更新大家自由安装）

"vue": "^3.2.16",

"vue-router": "^4.0.12"

2：首先创建路由

// 引入vue-router的两个api,
// createRouter创建路由，createWebHashHistory 采用hash模式， createWebHistory采用history模式
import {createRouter,createWebHashHistory}  from 'vue-router'
const router=createRouter({
  history:createWebHashHistory(),
  routes:[
    {
      path:'/',
      redirect:'/home'
    },
    {
      path:'/home',
      name:'home',
      component:()=>import('./../components/HelloWorld.vue')
    },
    {
      path:'/routertest',
      name:'routertest',
      component:()=>import('./../components/routerTest.vue')
    }
  ]
})
export default router

创建路由的页面不要引入 vue import 'Vue' from 'vue'

否则会导致页面出不来报错，

The requested module '/node_modules/.vite/vue.js?v=142c794c' does not provide an export named 'default'

// 我用的vite 安装的项目

3 引入router 并使用（在main.js里）

import App from './App.vue'
import router from './router/index'
let app=createApp(App)
app.use(router)
app.mount('#app')

4 留展示页面的’坑‘（在app.vue里）

<template>
  <router-view />
</template>