vue3 vue-router@4的引入方法

1.npm i vue-router@4

在scr下建立一个router文件夹并建这俩文件

 2.index.js中

import {createRouter, createWebHistory} from 'vue-router'
import routes from './routes'
 const router = createRouter({
    history: createWebHistory(), 
    routes
})
export default router

3.routes.js中

const routes = [
    {
        name: '/home',
        path: '/home',
        component: () => import('../pages/index.vue')
        //地址内文件不可以是空的vue文件，要有template，不然template解析会报错，
    },
    
];
export default routes

4.mian.js中

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

5.使用一种方法 app.vue

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

<script>
import router from './router'


export default {
  name: 'App',
  components: {

  },
  mounted(){
  router.push({
    name:'/home'
  })
  }
}
</script>

直接地址栏输入的 url 访问,404 ,项目中的跳转又是正常的

不同的历史模式 | Vue Router