npm vue 路由之一级路由(npm默认已经集成了vue)

news/2024/4/27 10:39:57/文章来源:https://blog.csdn.net/qq_25261441/article/details/128157332

npm vue 路由之一级路由(npm默认已经集成了vue)
文档https://v3.router.vuejs.org/zh/installation.html
npm install vue-router@3.5.2 --save

1.在App.vue上面添加

<router-view></router-view>

2.在main.js上面添加
import VueRouter from “vue-router”
import Test from “@/components/Test”;
import HelloWorld from “@/components/HelloWorld”;
Vue.use(VueRouter)

const routes = [
{ path: ‘/home’, component: Test },
{ path: ‘/about’, component: HelloWorld },
]
const router =new VueRouter({
routes, // routes: routes 的缩写
})

new Vue({
render: h => h(App),
router,
}).$mount(‘#app’)
npm run serve 运行 http://127.0.0.1:8080

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_229692.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Lattice库联合ModelSim仿真FIFO

Lattice联合ModelSim仿真FIFO前言一、添加IP二、库文件添加&#xff08;一&#xff09;方式一&#xff1a;添加器件库到ModelSim&#xff08;二&#xff09;方法二&#xff1a;直接添加器件库到Libray,和tb.v在同一个目录下仿真三、仿真&#xff08;一&#xff09;仿真文件&…

[附源码]Python计算机毕业设计Django基于java的社区管理系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

计网个人作业03

R14. True or false? a a. Suppose Host A is sending a large file to Host B over a TCP connection. If the sequence number for a segment of this connection is m, then the sequence number for the subsequent segment will necessarily be m 1. 假设主机A通过一…

世界连续动作预测模型-方向模型

🍿*★,*:.☆欢迎您/$:*.★* 🍿 正文 <

[附源码]JAVA毕业设计家庭理财管理系统(系统+LW)

[附源码]JAVA毕业设计家庭理财管理系统&#xff08;系统LW&#xff09; 目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术…

[附源码]计算机毕业设计医院挂号住院管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

[附源码]计算机毕业设计学生在线考试系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

[附源码]计算机毕业设计医疗器械公司公告管理系统Springboot程序

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

[附源码]JAVA毕业设计健身房管理系统(系统+LW)

[附源码]JAVA毕业设计健身房管理系统&#xff08;系统LW&#xff09; 目运行 环境项配置&#xff1a; Jdk1.8 Tomcat8.5 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&a…

python使用opencv画圣诞树和画小星星函数

画星星函数&#xff1a; #img 图片 #x y 坐标 #size 大小 def darw_star(img,x,y,color,size40):poly_linenp.array([[x, y-size], [xint(size/4), y-int(size/4)], [xsize, y-int(size/4)],[xint(0.375*size),yint(size/4)],[xsize,ysize],\[x,yint(0.625*size)],[x-size,ysi…

uni-app入门:自定义tabbar

本文介绍如何使用vant Weapp定义自定义tabbar.按照自定义图标的方式进行添加: 自定义tabbar微信官方链接: https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html 1.导入vant weapp并构建npm 项目根目录右键选择外部终端窗口中打开 …

VS系列多通道无线采发仪

VS101/104/208/416/432 是以振弦、温度传感信号为主的多通道无线采发仪&#xff0c;并可扩展其它模拟&#xff08;电流、 电压、电阻&#xff09;信号和数字信号&#xff08;RS485、RS232&#xff09;传感器通道&#xff0c;内置电池&#xff0c;可外接太阳能电池板。最多可实…

【学习记录】Dynaslam源代码魔改-替换MaskRCNN为YoloV5

这两天接了个小任务&#xff0c;需求是替换Dynaslam里面的动态物体识别模块&#xff0c;将MaskRCNN换为YoloV5&#xff0c;这里记录一下过程中遇见的问题。 一、运行Dynaslam Dynaslam本身是一个基于ORBSLAM2的视觉SLAM框架&#xff0c;论文并没有仔细看过&#xff0c;简单来…

期末测试——H5方式练习题

期末考试——H5完成方式——练习题 前言 本练习训练了孩子们的栅格化布局&#xff0c;H5标签&#xff0c;CSS样式&#xff0c;并对列表与菜单进行了强化训练。使孩子们更好的掌握H5布局&#xff0c;为后面的框架教学打好基础。 素材下载地址&#xff1a; 链接&#xff1a;htt…

UltraISO 制作U盘启动盘

1、 从Ubuntu官网http://cn.ubuntu.com/download/下载系统的iso文件 用来制作的U盘需要是FAT32格式的&#xff0c;可以通过格式化U盘更改&#xff08;注意&#xff0c;如果U盘已经写入过隐藏分区了&#xff0c;需要在磁盘管理里面删除相关隐藏分区然后合并为一个大分区后…

open label file.(This can be normal only if you use MScoco)

E:\yolov4-rubish\darknet\our_data\ImagesAug 把标签的txt文件和Jpg文件放在同一个文件夹

12月2日:thinkphp中数据库完结

数据库的查询 聚合查询 聚合查询的几种方法其中将count作为重点来说&#xff0c;由图所示&#xff0c;即为使用count()方法中需要注意的点 count(*)的使用count()中字段名为具体值的使用方法时间查询 官方文档中列举的是使用wheretime()进行查询的方法&#xff0c;但是在日常的…

C++11标准模板(STL)- 算法(std::set_difference)

定义于头文件 <algorithm> 算法库提供大量用途的函数&#xff08;例如查找、排序、计数、操作&#xff09;&#xff0c;它们在元素范围上操作。注意范围定义为 [first, last) &#xff0c;其中 last 指代要查询或修改的最后元素的后一个元素。 计算两个集合的差集 std:…

历史名人鲁迅介绍HTML个人网页作业作品下载 历史人物介绍网页设计制作 大学生英雄人物网站作业模板 dreamweaver简单个人网页制作

&#x1f389;精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业…

【历史上的今天】12 月 3 日:世界上第一条短信;Fortran 语言之父诞生;百度贴吧上线

整理 | 王启隆 透过「历史上的今天」&#xff0c;从过去看未来&#xff0c;从现在亦可以改变未来。 今天是 2022 年 12 月 3 日&#xff0c;在 21 年前的今天&#xff0c;电动平衡车&#xff08;Segway&#xff09;问世&#xff1b;电动平衡车是一种电力驱动、具有自我平衡能力…