位置: IT常识 - 正文

【学Vue就跟玩一样】Vue中的路由与多种守卫(vue要怎么学)

编辑:rootadmin
【学Vue就跟玩一样】Vue中的路由与多种守卫 1.vue-router

推荐整理分享【学Vue就跟玩一样】Vue中的路由与多种守卫(vue要怎么学),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue要怎么学,vue学的快吗,vue学的快吗,vue学起来困难吗,vue学起来困难吗,vue学完,学vue用什么软件,vue学完,内容如对您有帮助,希望把文章链接给更多的朋友!

vue的一个插件库,专门用来实现对SPA应用的单页Web应用(single page web application, SPA)。整个应用只有一个完整的页面。点击页面中的导航链接不会刷新页面,只会做页面的局部更新。数据需要通过ajax请求获取。

2.什么是路由

一个路由就是一组映射关系(key :value)

key 为路径, value可能是function或componente

路由分类

1.后端路由:value 杲function,用于处理客户端提交的请求。工作过程: 服务器接收到一个请求时,根据请求路径找到匹配的函数来处理请求,返回响应数据。

2.前端路由: value是component,用于展示页面内容。工作过程: 当浏览器的路径改变时,对应的组件就会显示。

3.路由的基本使用

1.安装vue-router

npm i vue-router【学Vue就跟玩一样】Vue中的路由与多种守卫(vue要怎么学)

2.应用插件

Vue.use(VueRouter)

3.router配置项

// 引入vueRouterimportvueRouterfrom'vue-router'// 引入组件importAboutfrom'../components/About'importHomefrom'../components/Home'export default new vueRouter({routes: [{path: '/about',component: About},{path: '/home',component: Home},]

})

4.使用router-link实现切换(注:router-link经过浏览器后就会变成a标签哦)

<divclass="list-group"><!-- 原始写法——使用a标签进行页面的跳转 --><!-- <a class="list-group-item active" href="./about.html">About</a><a class="list-group-item" href="./home.html">Home</a>--><!-- 使用vue-Router提供的标签进行路径的修改,实现路由的切换 --><router-link            class="list-group-item"            active-class="active"            to="/about">About           </router-link><router-link            class="list-group-item"            active-class="active"            to="/home">Home           </router-link></div>

5.使用router-view实现组件的呈现(类似于插槽)

<divclass="panel-body"><!-- 指定组件的呈现位置 --><router-view></router-view></div>

注:1.路由组件通常存放在pages文件夹,所以不要往components文件夹里面放了2.通过切换,“隐藏” 了的路由组件,默认是被销毁掉的,需要的时候再去挂载3.每个组件都有自己的$route属性,里面存储着自己的路由信息。4.整个应用只有一个router, 可以通过组件的$router属性获取到。

4.多级路由

在配置路由规则的以及路由里面进行配置下一级路由使用children:[ { } ]这种形式

routes: [{path: '/about',component: About},{path: '/home',component: Home,children: [{path: 'news',component: News},{path: 'message',component: Message}]},]5.路由传参

有两种方式,第一种就是直接再路径里面写query参数,第二种就是params传参

路由命名(简化代码)

再to的时候就不用写一大堆路径了

1.params

1. 配置路由

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

上一篇:如何构建您自己的 ChatGPT:无需代码的 AI(如何构建自己的精神空间)

下一篇:【微信小程序】一文读懂,数据请求(微信小程序在哪里找?)

  • 应交税费负数调整到其他非流动资产
  • 企业所得税行业所得率
  • 增值税发票记账联和抵扣联都丢了怎么办
  • 消费税征税范围是什么口诀
  • 文化建设税减免到什么时候
  • 个人所得税孩子小学升初中要修改吗?
  • 报销单与发票金额不符
  • 开票名称开错了
  • 母子公司好处
  • 公司对项目管理方式
  • 接受固定资产投资的企业,应该按照投资合同
  • 2018年出口退税税率
  • 房地产企业收到定金 什么时候交增值税 账务处理
  • 资本化利息金额
  • 如何让解决中世纪基督教世界黑暗
  • 企业之间的往来款现金流
  • win10系统如何禁用驱动强制签名
  • 开机速度慢是怎么回事
  • 收到采购发票未开票
  • pop是什么文件
  • 前期差错更正怎么计算
  • 建筑工程给排水的内容
  • 厂家赠送的商品如何走账
  • windows11 beta渠道
  • PHP aes (ecb)解密后乱码问题
  • 亨茨维尔机场
  • 委托代销双方账务处理
  • 以公允价值计量的金融资产不计提损失准备
  • php bind_result
  • php array_reverse 以相反的顺序返回数组实例代码
  • 给工程项目买保险是选哪个保险公司
  • 什么是重绘和回流
  • jquery还用吗2020
  • 浅析Laravel5中队列的配置及使用
  • 企业做账会计分录流程
  • 增值税专用发票丢了怎么补救
  • 工程发票需要备注吗
  • 用vue做的企业项目
  • 土地租赁费属于什么收入
  • 领取材料的分录
  • 企业低值易耗品的摊销方法有
  • 残保基金什么时候申报
  • 用于职工福利的固定资产折旧
  • mysql日期和时间分开存的 索引
  • 科目在会计上是什么意思
  • 住宿发票丢失
  • 计提贷款损失准备的意义
  • 购进业务:从国内购进生产用原材料
  • 企业每月营业额达多少需要交税
  • 房屋免租期的房子能卖吗
  • 什么是调表不调账
  • 单位注销合并劳动合同有效吗
  • 原始凭证和记账凭证的填制
  • 健身中心开的服装店
  • 变卖固定资产怎么交税
  • 新准则委托代建会计处理
  • mysql同步问题之Slave延迟很大优化方法
  • mysql默认8小时自动断开
  • win7 bug
  • fedora i3wm
  • ubuntu安装quagga
  • cad90度角
  • win7使用临时配置文件登录
  • perl scripts
  • cocos3d物理引擎
  • opengl es programming guide
  • 如何限制用户只能使用
  • JavaScript中的变量名不区分大小写
  • 安卓开发过程中的问题
  • csh,tcsh,bash,sh等shell的区别
  • app录音功能开发
  • 简单使用23 款华为s E可以吗
  • 对xmlHttp对象方法和属性的理解
  • python中如何获取列表中位数
  • jquery设置div的宽度和高度
  • 江西省电子税务局登录入口
  • 高速通行费发票查验
  • 南京地税局局长名单
  • 本期预缴税额怎么填
  • 煤炭资源税税率选煤税率多少黑龙江
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设