泰安网站建设公司,知名商城网站建设价格,2016最新wordpress模板,网站建设的投资预算怎么写文章目录前言一、配置路由#xff08;vue-router#xff09;1、安装路由2、新建页面3、创建路由配置文件4.特殊报错#xff01;前言
紧接上篇文章#xff0c;vue3的配置与vue2是有所差别的#xff0c;本文就讲述了如何配置#xff0c;如果本文对你有所帮助请三连支持博主…
文章目录前言一、配置路由vue-router1、安装路由2、新建页面3、创建路由配置文件4.特殊报错前言
紧接上篇文章vue3的配置与vue2是有所差别的本文就讲述了如何配置如果本文对你有所帮助请三连支持博主。 下面案例可供参考
一、配置路由vue-router
1、安装路由
使用npm命令进行安装 npm install vue-router4 完成后我们打开项目根目录下的 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.vueconst 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文件中添加读者可根据自己的情况进行添加
templatenavrouter-link to/Home/router-link |router-link to/aboutAbout/router-link/navrouter-view/
/template4.特殊报错
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然后重新运行。
