位置: 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)

  • 安卓手机如何打开.xmind文件(安卓手机如何打开zip文件)

    安卓手机如何打开.xmind文件(安卓手机如何打开zip文件)

  • 快手怎么换收款账户(快手小店收款方式怎么改)

    快手怎么换收款账户(快手小店收款方式怎么改)

  • 爱奇艺阅读里怎么写小说(爱奇艺阅读怎么订阅小说)

    爱奇艺阅读里怎么写小说(爱奇艺阅读怎么订阅小说)

  • 抖音直播音浪怎么看不到(抖音直播音浪怎么赚钱)

    抖音直播音浪怎么看不到(抖音直播音浪怎么赚钱)

  • 苹果有地震预警吗(苹果有地震预警拿)

    苹果有地震预警吗(苹果有地震预警拿)

  • 在QQ里怎样压缩文件(在qq里怎样压缩图片)

    在QQ里怎样压缩文件(在qq里怎样压缩图片)

  • 微信公众号可以看到谁阅读了吗(微信公众号可以设置几个管理员)

    微信公众号可以看到谁阅读了吗(微信公众号可以设置几个管理员)

  • backup文件夹可以删除吗(backup文件夹可以全部删除吗)

    backup文件夹可以删除吗(backup文件夹可以全部删除吗)

  • windows7的整个显示屏幕称为(windows7的整个显示器称为)

    windows7的整个显示屏幕称为(windows7的整个显示器称为)

  • 如何在手机上看电视频道(如何在手机上看U盘内容)

    如何在手机上看电视频道(如何在手机上看U盘内容)

  • 电脑如何下载微信(电脑如何下载微信并安装到桌面)

    电脑如何下载微信(电脑如何下载微信并安装到桌面)

  • a8 7410相当于i几(a8 7410处理器相当几代i5)

    a8 7410相当于i几(a8 7410处理器相当几代i5)

  • 钉钉可以看见学生分屏吗(钉钉可以看见学生的观看时间吗)

    钉钉可以看见学生分屏吗(钉钉可以看见学生的观看时间吗)

  • 手机屏幕裂开了可以用什么胶水粘(手机屏幕裂开了可以继续使用吗)

    手机屏幕裂开了可以用什么胶水粘(手机屏幕裂开了可以继续使用吗)

  • 苹果网易云音乐怎么悬浮歌词(苹果网易云音乐怎么设置铃声)

    苹果网易云音乐怎么悬浮歌词(苹果网易云音乐怎么设置铃声)

  • 怎么添加底纹颜色(这么添加底纹)

    怎么添加底纹颜色(这么添加底纹)

  • 荣耀20青春版怎么设置黑名单(荣耀20青春版怎么刷机)

    荣耀20青春版怎么设置黑名单(荣耀20青春版怎么刷机)

  • 手机qq怎么关闭你可能感兴趣(手机qq怎么关闭小世界功能)

    手机qq怎么关闭你可能感兴趣(手机qq怎么关闭小世界功能)

  • 陌陌为什么不能发视频聊天(陌陌为什么不能评论)

    陌陌为什么不能发视频聊天(陌陌为什么不能评论)

  • 详解Linux系统中字符串搜索命令ngrep的用法(linux的sh)

    详解Linux系统中字符串搜索命令ngrep的用法(linux的sh)

  • mim.exe是什么进程 有什么用 mim进程查询(msmpeng.exe是什么进程)

    mim.exe是什么进程 有什么用 mim进程查询(msmpeng.exe是什么进程)

  • hphmon06.exe是什么进程 作用是什么 hphmon06进程查询(hpcfont.dll)

    hphmon06.exe是什么进程 作用是什么 hphmon06进程查询(hpcfont.dll)

  • Unity脚本类 ---- Input类,虚拟轴与插值方法(unity常用脚本语言)

    Unity脚本类 ---- Input类,虚拟轴与插值方法(unity常用脚本语言)

  • 农村个体工商户的定义
  • 银行的划分标准
  • 进项税多久有效
  • 中小型企业营业额和从业人数
  • 员工工资计入管理费用吗
  • 开的税票必须过期怎么办
  • 车船抵扣如何填报
  • 一般纳税人可以开1%的发票吗
  • 小规模纳税人如何开电子发票
  • 增值税组成计税价格包括消费税吗
  • 购进原材料发生非正常损失,账面成本10万元 该原材料
  • 不动产经营租赁属于现代服务吗
  • 印花税要报吗
  • 营改增后税金由哪几项费用组成
  • 电商一般纳税人如何报税
  • 一般纳税人如何零申报
  • 医疗机构的界定
  • 无形资产入账价值包括注册费吗
  • 外购库存商品
  • 上个月的印花税,这个月交款怎么做分录
  • 投资理财产品的优势和劣势
  • 营运资金管理策略有哪些
  • 预缴税款是否计入成本
  • PHP:mb_encoding_aliases()的用法_mbstring函数
  • PHP:oci_internal_debug()的用法_Oracle函数
  • win10系统日志在哪个文件夹
  • 契税计税依据及计算方式
  • 外商投资工业企业有哪些
  • vue框架基础知识
  • php浮点数
  • php模板源码
  • 购买税盘的服务费全额抵扣怎么操作
  • 期末余额和年初余额为什么不一样
  • 固定资产提前报废
  • php微信公众号消息推送
  • lvresize命令
  • java一维数组从小到大排序
  • 固定资产怎么确定折旧年限
  • 结余资金包括结转资金吗?
  • 所有者权益变动表反映的是什么
  • 工业企业辅助生产设备
  • 存货跌价准备是谁的备抵账户
  • 一般纳税人不开票收入怎么做账
  • 购买债券收到的现金
  • 政府补助属于不征税金吗
  • 消费税直接计入销售额吗
  • 实收资本认缴如何做账
  • 收到银行承兑汇票怎么处理
  • 国有资产划转实施方案
  • 企业年金个税怎么计算
  • 建筑行业异地预缴税率
  • 办公室购买电脑属于什么费用
  • 三栏式明细账目录表
  • 用于研发购买的云服务器应计入研发费用直接投入里吗
  • 差旅费报销单填写模板电子版
  • 小规模其他业务收入交多少税率
  • 发票找不到了怎么操作
  • 待摊费用在新会计准则里面有吗
  • 我是海关企业员工英语
  • 实收资本未到账减资要交税吗
  • sql2000数据库怎么使用
  • win10系统迅雷
  • linux系统 虚拟机
  • windows10x预览版
  • xp系统怎么和win7系统共享
  • centos设置双网卡
  • find命令支持哪些查找方式
  • win10系统开机自动还原
  • windows8用的人少
  • linux可视化界面怎么输入代码
  • Extjs中通过Tree加载右侧TabPanel具体实现
  • Node.js中的核心模块包括哪些内容?
  • 如何ssh登陆
  • shell字符串截取加替换
  • html中滚动条
  • 单机模式在哪
  • 普票怎么入账标识
  • 河南灵活就业缴费截止时间
  • 辽宁省国家税务局官网
  • 辽宁省银监局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设