vue3的路由([email protected])版本的使用

前提：最近学习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>