位置: IT常识 - 正文
Vue3配置路由(vue-router)(vue路由使用方法)
编辑：rootadmin推荐整理分享Vue3配置路由(vue-router)(vue路由使用方法)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vuecli3路由配置,vuecli3路由配置,vue如何配置路由,vue3.0路由配置,vue3配置路由 加载之前的页面添加组件,vuecli3路由配置,vue3.0路由配置,vue3配置路由时为啥显示找不到文件,内容如对您有帮助，希望把文章链接给更多的朋友！
紧接上篇文章，vue3的配置与vue2是有所差别的，本文就讲述了如何配置，如果本文对你有所帮助请三连支持博主。
下面案例可供参考
一、配置路由（vue-router）1、安装路由使用npm命令进行安装 ：npm install vue-router@4 完成后我们打开项目根目录下的 package.json文件： 如下即为成功
2、新建页面
这里创建 view目录，然后在view目录下创建 AboutView.vue HomeView.vue 两个 vue页面文件 然后再两个文件中随便写些内容
3、创建路由配置文件新建 router目录，然后在 router目录下新建 index.js和routes.js文件
index.js 文件内容如下:
import { createRouter, createWebHistory } from 'vue-router'import HomeView from '../views/HomeView.vue'const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', component: () => import('../views/AboutView.vue') }]const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes})export default router在 main.js中配置路由:
import { createApp } from 'vue'import App from './App.vue'import router from './router/index'//注意use要在mount之前createApp(App).use(router).mount('#app')添加router-view与router-link： 我这里为了演示在 App.vue文件中添加，读者可根据自己的情况进行添加
<template> <nav> <router-link to="/">Home</router-link> | <router-link to="/about">About</router-link> </nav> <router-view/></template>4.特殊报错！vue 最坑报错：Newline required at end of file but not found eol-last 解决办法： 查看 router文件中 的index.js文件最后一行后面是否有空行 没有则需要添加一个。
如果报错：error and 0 warnings potentially fixable with the --fix option. 因为Eslint这个语法检测很严格，所以缩进和空格等有问题他也会报错的，我们直接在vue.config.js把他关掉就可以了，加入此行代码：lintOnSave: false，然后重新运行。
上一篇：Nā pali海岸上的Bright Eye海蚀洞，夏威夷考艾岛 (© jimkruger/Getty Images)(海岸边上)
下一篇：朝圣者将风马旗扔向甘登寺上方的空中为新年祈福，中国西藏 (© Ian Cumming/plainpicture)