vue3 vue-router@4的引入方法

贺今宵

已于 2023-04-14 14:16:55 修改

阅读量412

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

于 2023-02-23 10:00:04 首次发布

本文链接：https://blog.csdn.net/qq_51389137/article/details/129175273

版权

vue 专栏收录该内容

27 篇文章 1 订阅

订阅专栏

文章讲述了在Vue项目中使用vue-router@4进行路由配置的步骤，包括创建router文件夹、导入必要的模块、定义routes以及在main.js中应用路由。尽管配置正确，但当直接通过URL访问时出现404错误，而项目内的路由跳转正常。这可能涉及到VueRouter的不同历史模式设置导致的问题。

摘要由CSDN通过智能技术生成

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