Vue-Router入门

现在的前后端分离项目,后端只管数据传递,视图跳转的活交由前端来干了,vue-router就是专门来干这个活的,它可以让页面跳转到指定组件

  • 组件是可复用的 Vue 实例, 把一些公共的模块抽取出来,然后写成单独的的工具组件或者页面,在需要的页面中就直接引入即可那么我们可以将其抽出为一个组件进行复用。例如 页面头部、侧边、内容区,尾部,上传图片,等多个页面要用到一样的就可以做成组件,提高了代码的复用率。

第一个入门程序

创建项目

创建一个Vue项目,这里不做介绍,下面的三个模块将会被使用

  • components:放置组件的包
  • router:管理路由的包
  • App.vue:主界面

注意:在Vue的项目中index.js一般被指定为配置文件,比如router包下面的index.js就是专门管理路由的配置文件

编写组件

你可以把组件理解成视图层,只不过是把这些页面放在了components包下面,方便管理,这里编写了两个组件,hello.vue和main.vue

 hello.vue:

main.vue: 

编写router的配置文件

在vue中需要什么文件,就需要导包,这里的语法和java挺相似的

import hello from '../components/hello.vue':导入'/components/hello.vue'路径下的文    件,并将其命名为hello,那么在这个文件里,从上面的路径里导入的组件就叫hello

配置路由

语法就不做介绍了(照着来就行>_<)

  • path:路由路径,相当于后端的@RequestMapping或者servlet,专门管理访问路径的
  • name:路由名称
  • component:组件名称,指定要跳转到哪一个组件,这里的名称就是导包的时候命名的
//安装路由
Vue.use(VueRouter)//配置路由
export default new VueRouter({routes: [{//路由路径path: '/hello',//路由名称name: 'hello',//跳转到的组件component: hello},{path: '/main',name: 'Main',component: Main}]
})
 编写主页面

将刚刚配置好的路由,放进主页面(类似超链接)

<template>
<div id="#app"><router-link to="/hello">内容页</router-link><router-link to="/main">首页</router-link><router-view></router-view>
</div></template><script>
export default {name: 'App'
}
</script><style>
div{color: red;
}
</style>
注意

在运行时可能会遇到以下报错:

Can't resolve 'path' in 'E:\java-code\Vue\element_demo\src\router'

  • 这是由于webpack4到5进行了大变化,webpack5不在自动填充node.js核心模块,需要在vue.config.js手动配置自己需要的模块,如下:

页面

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

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

相关文章

面对DDOS攻击,有哪些解决办法

随着互联网带宽的持续增长以及DDOS黑客技术的发展&#xff0c;DDOS拒绝服务攻击的实施变得愈发容易。商业竞争、打击报复、网络敲诈等多种因素&#xff0c;各行各业的用户都曾受到DDOS攻击的威胁。 一旦遭受到DDOS攻击&#xff0c;随之而来的就是业务宕机&#xff0c;用户无法…

44.网络游戏逆向分析与漏洞攻防-角色管理功能通信分析-角色创建服务器反馈数据包分析

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果 现在的代码都是依据数据包来写的&#xff0c;如果看不懂代码&#xff0c;就说明没看懂数据包…

MySQL 慢查询优化案例

​>优质博文&#xff1a;IT-BLOG-CN 一、慢查询优化基本步骤 【1】先运行看看是否真的很慢&#xff0c;注意设置SQL_NO_CACHE&#xff08;查询时不使用缓存&#xff09;&#xff1b; 【2】where条件单表查&#xff0c;锁定最小返回记录表。这句话的意思是把查询语句的 whe…

转让北京装饰装修二级和建筑幕墙施工二级流程和条件

我公司可以帮您快速办理北京市各类建筑姿质申请&#xff0c;也有现成的姿质转让&#xff0c;新申请建筑姿质要求比较高&#xff0c;但是对于企业来说&#xff0c;承接模板脚手架工程也是需要具备姿质的&#xff0c;该姿质也就是模板脚手架姿质&#xff0c;那么对于企业想要申请…

Java实现线程同步的几种方式

synchronized 特点: 简单易用&#xff1a; synchronized 关键字的使用非常简单&#xff0c;它可以直接应用于方法或代码块上。对于对象和类的同步方法&#xff0c;JVM负责加锁和释放锁&#xff0c;开发者不需要手动操作。自动释放锁&#xff1a; 当synchronized方法或代码块执…

基于Java+SpringBoot+Vue幼儿园管理系统(源码+文档+部署+讲解)

一.系统概述 随着信息时代的来临&#xff0c;过去的传统管理方式缺点逐渐暴露&#xff0c;对过去的传统管理方式的缺点进行分析&#xff0c;采取计算机方式构建幼儿园管理系统。本文通过课题背景、课题目的及意义相关技术&#xff0c;提出了一种教 学生信息、学生考勤、健康记录…

Python map遍历

在Python中&#xff0c;map 函数是一个内置函数&#xff0c;它将指定的函数应用于给定序列&#xff08;如列表、元组等&#xff09;的每个项&#xff0c;并返回一个迭代器&#xff0c;该迭代器包含所有项经过指定函数处理后的结果。 ### map 函数的基本用法 map 函数的语法如…

centos如何卸载mysql

在CentOS系统中卸载MySQL&#xff0c;你可以遵循以下步骤&#xff1a; 停止MySQL服务&#xff1a; 1sudo systemctl stop mysqld 列出已安装的MySQL相关组件&#xff1a; 1sudo yum list installed | grep mysql 卸载所有MySQL相关的RPM包&#xff1a; 1sudo yum remove mysq…

PM2+Linux部署nuxt.js

PM2Linux部署nuxt.js 开始我使用了docker部署我的springboot项目&#xff0c;链接在这里&#xff0c;因为我是前后端分离项目&#xff0c;前端使用的nuxt.js框架&#xff0c;所以需要另外部署一下项目&#xff0c;以下是部署流程 1.将本地的nuxt项目打包 npm run build #生成…

Fecify 商品标签功能

关于商品标签 商品标签是指商家可以在展示商品时&#xff0c;自己创建一个自定义标签&#xff0c;可自定义某个关键词或短语。这样顾客在浏览商城时&#xff0c;只需要通过标签就能看到更直观的展示信息。 商品标签可以按照用户的属性、行为、偏好等进行分类&#xff0c;标签要…

传输大咖22|如何利用ProtoBuf实现高效的数据传输?

在今日信息技术日新月异的时代&#xff0c;数据传输的速度与安全性无疑成为了软件开发中的重中之重。无论是微服务架构下的服务间交流&#xff0c;还是客户端与服务器间的数据互动&#xff0c;寻求一种既高效又稳妥的数据传输方式已成为共识。尽管传统的数据格式&#xff0c;如…

坚持10天做完Python入门编程100题第二天

坚持十天做完Python入门编程100题第二天 第8题 列表的排序第9题 字典的创建第10题第11题 对字典的值求和第12题 字典推导式第13题 打印小写字母a~z第14题 计算1-100之间的偶数之和 第8题 列表的排序 列表num_list [3, 1, 5, 9, 15, 2, 7]&#xff0c;如和将列表按照从大到小的…

水务行业如何实现数字化转型实现智能化管理

水务行业在当下已经迈入了新的发展阶段&#xff0c;行业内增大了信息化、数字化的探索&#xff0c;尤其是智能化技术出现以后&#xff0c;智能水务概念的提出使得水务数字化转型成为可能。但我国水务行业经历了漫长的发展时期&#xff0c;在很长一段时间内因为存在发展思路、技…

骨传导耳机怎么选?这五款骨传导耳机性能好、配置高,跟着买不出错!

如今&#xff0c;骨传导耳机作为一种创意十足的蓝牙耳机&#xff0c;正在逐渐走入千家万户&#xff0c;成为最受欢迎的耳机款式。然而&#xff0c;随着骨传导耳机的热度增加&#xff0c;市面上开始出现各式各样的骨传导耳机品牌&#xff0c;面对琳琅满目的骨传导耳机品牌&#…

ECharts介绍

ECharts&#xff0c;全称Enterprise Charts&#xff0c;是一款基于JavaScript的数据可视化图表库。它以直观、生动、可交互以及可个性化定制的特点&#xff0c;为数据可视化提供了强有力的工具。ECharts最初由百度团队开源&#xff0c;后于2018年初捐赠给Apache基金会&#xff…

基于SpringBoot的“垃圾分类网站”的设计与实现(源码+数据库+文档+PPT)

基于SpringBoot的“垃圾分类网站”的设计与实现&#xff08;源码数据库文档PPT) 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;SpringBoot 工具&#xff1a;IDEA/Ecilpse、Navicat、Maven 系统展示 系统功能结构图 系统功能界面图 用户登录、用户注…

方案分享 | 针对ETC系统的OBE-SAM模块设计方案

ETC&#xff08;Electrical Toll Collection&#xff09;不停车收费是目前世界上最先进的路桥收费方式。通过安装在车辆挡风玻璃上的车载单元与安装在收费站 ETC 车道上的路侧单元之间的微波专用短程通讯&#xff0c;利用计算机联网技术与银行进行后台结算处理&#xff0c;从而…

2024软件测试工具测评,总有一款适合你!

在软件开发周期中&#xff0c;测试是确保产品质量的关键环节。随着企业对于软件质量的要求日益提升&#xff0c;测试人员面临着前所未有的挑战&#xff0c;“工欲善其事必先利其器”&#xff0c;选择一款高效、实用的软件测试工具&#xff0c;不仅能够提升测试效率&#xff0c;…

Unity发布webgl之后打开streamingAssets中的html文件

Unity发布webgl之后打开streamingAssets中的html文件 路径的拼接 /// <summary>/// 从配置文件中获取上位机的URL/// </summary>private void GetURLAboutUpLink(){Uri upLinkConfig new System.Uri(Path.Combine(Application.streamingAssetsPath "/UPLin…

ElasticSearch分词检索

1. 倒排索引&#xff1a;表示一种数据结构&#xff0c;分词词条与文档id集合的隐射关系 2. 它跟关系型数据库是一种互补的关系&#xff0c;因为关系型数据库支持事务操作&#xff0c;满足ACID原则 3. 索引库的文档字段只允许新增不允许修改 1.创建索引库 put /索引库名称2.1 …