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

news2024/11/24 5:04:23

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.coloradmin.cn/o/58488.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【计算机网络】计算机网络复习总结 ----- 计算机网络概述

计算机网络 内容管理计算机网络概述计算机网络定义计算机网络、互联网、因特网计算机网络产生和发展 &#xff08;略&#xff09;计算机网络分类按照网络作用范围分类&#xff1a;按照拓扑结构分类&#xff1a;按照交换技术分类按照应用模式分类&#xff1a;按照工作方式分类相…

opencv c++ 轮廓匹配

1、几何矩和Hu矩 1.1几何矩 a&#xff09;几何计算公式&#xff1a; p、q为阶数&#xff0c;当pq 1时&#xff0c;几何矩为一阶矩&#xff0c;pq 2&#xff0c;几何矩为二阶矩&#xff0c;依次类推。。 因此&#xff0c;对于二值图像有&#xff1a; 所有前景像素的x坐标之…

Spring对AOP的实现

Spring对AOP实现的模式分为2种&#xff0c;一种是代理&#xff0c;一种是AspectJ&#xff0c;这种区分方式是直接使用实现方式区分的。 二、Spring对动态代理的设计 动态代理我们都知道在Spring中分为JDK动态代理和cglib动态代理&#xff0c;JDK动态代理自不用说&#xff0c;…

没有几年经验你真学不会这份SpringCloud实战演练文档

前言 时间飞逝&#xff0c;转眼间毕业七年多&#xff0c;从事 Java 开发也六年了。我在想&#xff0c;也是时候将自己的 Java 整理成一套体系。 这一次的知识体系面试题涉及到 Java 知识部分、性能优化、微服务、并发编程、开源框架、分布式等多个方面的知识点。 写这一套 Ja…

[附源码]Python计算机毕业设计Django共享汽车系统

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

Unity 3D 碰撞体(Collider)|| Unity 3D 触发器(Trigger)

在游戏制作过程中&#xff0c;游戏对象要根据游戏的需要进行物理属性的交互。 因此&#xff0c;Unity 3D 的物理组件为游戏开发者提供了碰撞体组件。碰撞体是物理组件的一类&#xff0c;它与刚体一起促使碰撞发生。 碰撞体是简单形状&#xff0c;如方块、球形或者胶囊形&…

零基础入门数据挖掘——二手车交易价格预测:baseline

零基础入门数据挖掘 - 二手车交易价格预测 赛题理解 比赛要求参赛选手根据给定的数据集&#xff0c;建立模型&#xff0c;二手汽车的交易价格。 赛题以预测二手车的交易价格为任务&#xff0c;数据集报名后可见并可下载&#xff0c;该数据来自某交易平台的二手车交易记录&am…

四旋翼无人机学习第12节--跨页连接符的标号设置、DRC、PDF导出

文章目录1 跨页连接符的标号设置2 DRC与原理图检查3 PDF导出1 跨页连接符的标号设置 1、在设置跨页连接符的标号之前&#xff0c;需要去修改原理图的页码。 2、按照下图所示的操作步骤依次点击。 3、接着会弹出annotate的对话框&#xff0c;按照下图进行选择&#xff0c;如果…

数据结构(9)树形结构——大顶堆、小顶堆

目录 9.1.概述 9.2.操作 9.2.1.插入 9.2.2.删除 9.2.3.代码实现 9.1.概述 概念&#xff1a; 根节点是自己所在子树中的最值的完全二叉树。 根节点是所在子树的最大值&#xff0c;称为大顶堆。 根节点是所在子树的最小值&#xff0c;称为小顶堆。 堆的任何子树的根节点…

Android OpenGL ES 学习(七) – 纹理

OpenGL 学习教程 Android OpenGL ES 学习(一) – 基本概念 Android OpenGL ES 学习(二) – 图形渲染管线和GLSL Android OpenGL ES 学习(三) – 绘制平面图形 Android OpenGL ES 学习(四) – 正交投屏 Android OpenGL ES 学习(五) – 渐变色 Android OpenGL ES 学习(六) – 使用…

第二证券|11天9板,“超级面料”概念火爆,高管却偷偷减持

自带抗病毒特点的“超级面料”炽热&#xff0c;多家上市公司发表相关状况。 安奈儿11天9板收重视函 早盘&#xff0c;安奈儿再度涨停&#xff0c;短短11个交易日9个涨停板&#xff0c;累计涨幅到达127%。 昨日晚间&#xff0c;安奈儿收到深交所重视函。在重视函中&#xff0c…

【计算机毕业设计】72.房屋出租出售系统源码

一、系统截图&#xff08;需要演示视频可以私聊&#xff09; 摘 要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;房屋出租出售系统当然也不能排除在外。房屋出租出售系统是…

《绿色消费实施方案》的推出,释放出怎么样的信号,有无新的赛道

近日&#xff0c;国家发改委等七部门印发的《促进绿色消费实施方案》(以下简称《方案》)提出&#xff0c;探索实施全国绿色消费积分制度&#xff0c;鼓励地方结合实际建立本地绿色消费积分制度&#xff0c;以兑换商品、折扣优惠等方式鼓励绿色消费。鼓励各类销售平台制定绿色低…

C/C++语言 数据结构 创建邻接表存储的无向图及其邻接表的输出

目录 1.邻接表相关知识补充 2. 图的邻接存储表示 3.测试输入与输出样例 4.代码实现 4.1 创建无向图邻接表 4.2 输入无向图的邻接表 1.邻接表相关知识补充 定义&#xff1a; 对于图中每个顶点 vi&#xff0c;把所有邻接于 vi的顶点&#xff08;对有向图是将从vi出发的弧的弧头顶…

windows/linux命令行操作快捷方式

命令行快捷键 Ctrla&#xff1a;光标回到命令行首。 &#xff08;a&#xff1a;ahead&#xff09; Ctrle&#xff1a;光标回到命令行尾。 &#xff08;e&#xff1a;end&#xff09; Ctrlb&#xff1a;光标向行首移动一个字符。 &#xff08;b&#xff1a;backwards&#xff…

【模拟面试】23届本科生拿下字节/京东/网易研发offer,到底有多强?

这是一场模拟面试&#xff0c;面试选手是今年的应届生&#xff0c;拿下了字节/京东/网易的offer。 如果你想参加模拟面试欢迎私聊我&#xff0c;仅限后端&#xff0c;go语言更好。 下面可以看看这个同学的简历 我个人觉得挺不错的 总共问了几个问题 你们这个计费系统是干什么的…

想要精通算法和SQL的成长之路 - 判断子序列问题

想要精通算法和SQL的成长之路 - 判断子序列问题前言一. 判断子序列1.1 动态规划做法1.2 双指针二. 不同的子序列前言 想要精通算法和SQL的成长之路 - 系列导航 一. 判断子序列 原题链接 给定字符串 s 和 t &#xff0c;判断 s 是否为 t 的子序列。 字符串的一个子序列是原始字…

阿里p8实战总结SpringCloud微服务分布式系统文档

前言 有人调侃我们说&#xff1a; 程序员不如送外卖。送外卖是搬运食物&#xff0c;自己是搬运代码&#xff0c;都不产出新的东西……透支体力&#xff0c;又消耗健康&#xff0c;可替代性极强&#xff0c;30岁之后就要面临被优化的危险……想跳槽&#xff0c;但是更高的平台…

Interval Envision图像库,非常强大的图像功能

Interval Envision图像库被认为具有增强Borland和Embarcadero Delphi的能力&#xff0c;并为用户和开发人员提供非常强大的图像功能。该库能够为用户提供一个图像文件I/O&#xff0c;用于文件的流行格式、扫描、打印过程、ocr的接口&#xff0c;以及最终的图片处理&#xff0c;…

Linux文件系统——文件系统、挂载点、目录结构

目录 一、目录结构 1.1 基本介绍 1.2 详细说明目录作用 二、挂载点 一、目录结构 1.1 基本介绍 Linux是一切皆文件&#xff0c;将所用的东西当做文件处理 目录结构就是一个单一的树状结构 整个的目录树只有一个树根&#xff1a;/ 根目录 文件夹分门别类的放到根目录…