位置: IT常识 - 正文

Vue3配置路由(vue-router)(vue路由使用方法)

编辑:rootadmin
Vue3配置路由(vue-router) 文章目录前言一、配置路由(vue-router)1、安装路由2、新建页面3、创建路由配置文件4.特殊报错!前言

推荐整理分享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、新建页面Vue3配置路由(vue-router)(vue路由使用方法)

这里创建 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,然后重新运行。

本文链接地址:https://www.jiuchutong.com/zhishi/294472.html 转载请保留说明!

上一篇:Nā pali海岸上的Bright Eye海蚀洞,夏威夷考艾岛 (© jimkruger/Getty Images)(海岸边上)

下一篇:朝圣者将风马旗扔向甘登寺上方的空中为新年祈福,中国西藏 (© Ian Cumming/plainpicture)

  • jkm-aloo华为什么型号(JKmAloo华为什么型号)

    jkm-aloo华为什么型号(JKmAloo华为什么型号)

  • 王者荣耀助手怎么查别人战绩(王者荣耀助手怎么看历史巅峰)

    王者荣耀助手怎么查别人战绩(王者荣耀助手怎么看历史巅峰)

  • 联通机顶盒遥控器没了,用手机怎么遥控(联通机顶盒遥控器怎么配对)

    联通机顶盒遥控器没了,用手机怎么遥控(联通机顶盒遥控器怎么配对)

  • 手机QQ手机邮箱在哪里找到(手机qq里面邮箱)

    手机QQ手机邮箱在哪里找到(手机qq里面邮箱)

  • 手机拍照存入存储卡的图片属于什么数据(手机拍照片存在手机哪里)

    手机拍照存入存储卡的图片属于什么数据(手机拍照片存在手机哪里)

  • 手机进水有条纹怎么办(手机进水有条纹需要多少钱)

    手机进水有条纹怎么办(手机进水有条纹需要多少钱)

  • 安卓怎么使用苹果手表(安卓怎么使用苹果主题)

    安卓怎么使用苹果手表(安卓怎么使用苹果主题)

  • 360云台版1080恢复出厂设置(360云台版1080恢复出厂设置视频)

    360云台版1080恢复出厂设置(360云台版1080恢复出厂设置视频)

  • ppt修改后无法保存原因(ppt修改后无法保存文件)

    ppt修改后无法保存原因(ppt修改后无法保存文件)

  • 手机紫屏怎么办(手机屏幕黑屏了怎么办)

    手机紫屏怎么办(手机屏幕黑屏了怎么办)

  • 为什么苹果11网络那么慢(为什么苹果11网络那么卡)

    为什么苹果11网络那么慢(为什么苹果11网络那么卡)

  • 微信静音了怎么调回来(微信静音了怎么还震动)

    微信静音了怎么调回来(微信静音了怎么还震动)

  • 手机勿扰模式怎么关闭(手机勿扰模式怎么打进去电话)

    手机勿扰模式怎么关闭(手机勿扰模式怎么打进去电话)

  • 苹果11pro max怎么设置闹钟(苹果11promax怎么样 优点和缺点)

    苹果11pro max怎么设置闹钟(苹果11promax怎么样 优点和缺点)

  • 爱奇艺会员可以几个人用(爱奇艺会员可以几个人一起登录)

    爱奇艺会员可以几个人用(爱奇艺会员可以几个人一起登录)

  • 苹果x怎么连接小爱同学(苹果x怎么连接iTunes)

    苹果x怎么连接小爱同学(苹果x怎么连接iTunes)

  • 毒花呗分期怎么还款(毒如何花呗分期)

    毒花呗分期怎么还款(毒如何花呗分期)

  • 抖音里转发的视频怎么删除(抖音里转发的视频怎么没有了)

    抖音里转发的视频怎么删除(抖音里转发的视频怎么没有了)

  • iphone x原彩显示在哪里(iphonex原彩显示有什么用)

    iphone x原彩显示在哪里(iphonex原彩显示有什么用)

  • 巧影怎么剪辑视频(怎样用巧影软件制作视频短片)

    巧影怎么剪辑视频(怎样用巧影软件制作视频短片)

  • win10改win7鼠标无反应(win10改win7鼠标无反应bios)

    win10改win7鼠标无反应(win10改win7鼠标无反应bios)

  • 【CUDA安装详细教程】(cuda安装步骤)

    【CUDA安装详细教程】(cuda安装步骤)

  • Python中类的继承是什么(python类的继承与多态)

    Python中类的继承是什么(python类的继承与多态)

  • 个人缴纳职业年金是什么意思
  • 年底对账
  • 超市小规模纳税人会计难吗
  • 减免增值税计入其他收益
  • 去参加博览会的英文
  • 应交税费进项税额属于什么科目借贷方向
  • 公司入股资金有发票吗
  • 购入汽车的增值税可以抵扣差额开具的销项吗
  • 无形资产计税依据
  • 土地置换账务处理流程
  • 延期缴纳税款会退回吗
  • 价外费用纳税义务发生时间
  • 出口抵减内销产品
  • 挂靠人员帮外单位人员缴纳社保如何做账
  • 零报税报表怎么下载
  • 工厂出租厂房税率
  • 小规模纳税人定额发票怎么报税
  • 母子公司之间支付的租赁费可以税前扣除么
  • 免抵退税金额是啥意思
  • 小规模纳税人如何开专票
  • 公益性捐赠支出账务处理
  • 无法删除文件提示怎么办
  • 认证超时什么意思
  • 职工教育经费培训费扣除比例
  • downloadplus.exe是什么进程 作用是什么 downloadplus进程是安全的吗
  • 股权转让分期付款协议
  • 公司交会费有什么用
  • 结算审计流程图
  • win7纯净版系统
  • 企业所得税税前扣除凭证管理办法
  • 微信网页开发工具
  • 未确认融资费用借贷方向
  • 项目版本管理是什么
  • yolov3训练
  • 螺旋状芦荟 (© David Madison/Getty Images)
  • 小规模纳税人增值税申报表怎么填
  • 对公户怎么取备用金
  • 框架 frame
  • linux shell
  • php新手入门教程
  • 收到国税退回的发票
  • unetbootin怎么删除
  • 基本户理财产品有哪些
  • Spring(十五):Spring整合MyBatis的两种方式
  • phpcms安装
  • PostgreSQL分区表(partitioning)应用实例详解
  • 11-ElementUI
  • 收取水电费计入什么科目
  • 佣金的会计如何计算
  • 工会经费怎么计算缴纳
  • 发票先认证后入账怎么做账
  • 所得税税率变化对已确认递延所得税资产的影响
  • 非货币性资产交换换入资产的入账价值
  • 企业的营业税金怎么计算
  • 资本溢价产生的主要原因
  • 可供出售金融资产属于什么科目
  • 报废车收到的钱怎么做账
  • 汽车价外费用
  • 员工福利费怎么写分录
  • mysql第四章
  • 复制糸统
  • linux服务器怎么用
  • centos7升级内核后 无法启动
  • 设计制作个性化文集答案
  • centos7.4安装
  • Linux操作系统中怎么永久设置环境变量?
  • WIN10补丁白屏
  • angular的排序管道
  • 接口回调java
  • shell while 小于
  • linux下socket编程常用头文件(推荐)
  • shell脚本 su
  • unity 开发游戏
  • bootstrap 树
  • javascript document.execCommand() 常用解析
  • js实现文本框输入功能
  • 源代码举例
  • 个人土地建房
  • 出口退税申报时闿
  • 个人所得税税率怎么算
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设