位置: 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(如何构建自己的精神空间)

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

  • 生产企业出口退税的计算方法
  • 个体工商户生产经营所得税税率表2021
  • 收到天使投资如何做账
  • 个税申报人员多怎么申报
  • 发票第二年是否可以作废
  • 款项已付发票未到,怎么做凭证
  • 签证费没有发票可以入账吗
  • 邮局可以开发票吗 税点多少
  • 生产成本月末转到哪里
  • 事业单位固定资产
  • 资本金可以出借吗
  • 其他流动资产的构成
  • 商业承兑汇票怎么开
  • 没收到发票可以做成本吗
  • 产品成本计算的公式
  • 施工单位企业税率是多少
  • 对公账户钱怎么退回去
  • 记账凭证的科目不会填
  • 什么是税收编码,在哪里查
  • 个人代开专票季未超30万附加税需要交吗
  • win10怎么看电脑名称
  • 如何使用u盘安装win11
  • win11怎么用
  • 年折旧率怎么计算折旧几年
  • 企业收到的政府补贴,怎么入账
  • 装修公司开专票要交几个点
  • 发生销售折让会计分录
  • 辅导期纳税人领票预缴税款
  • windows为什么从7开始
  • php unset()
  • 莱姆 惨败
  • 注销小规模公司需要什么材料
  • 专项应付款转资本公积需要什么附件
  • 小规模纳税人上月发票开错了怎么办
  • framework教程
  • java webflux
  • 强化学习之stable_baseline3详细说明和各项功能的使用
  • uniapp开发微信小程序怎么样
  • ftp port命令
  • 原材料存货跌价准备会计分录
  • 小规模纳税人研发费用加计扣除优惠政策
  • 浏览器任意链接在哪里
  • 小规模纳税人三减一政策
  • 房地产业具体怎么做
  • 按月缴纳增值税的纳税人申报期限为计算期次月的( )
  • 银行手续费已扣发票未开的账务处理
  • 小规模纳税人水利基金税率
  • 进口原料需要交哪些税
  • 工作服入什么科目类别
  • 项目对公司的战略意义
  • 补缴以前年度的税
  • 社保税款所属期申报错了要紧吗?
  • 企业应交税金包括印花税吗
  • 对公账户汇款怎么原路退回
  • 完成认证后开具什么证明
  • 刻章费发票怎么开
  • 财务章和公章的样式区别图片
  • kvm虚拟机paused
  • win7系统设置自动关机
  • Mac苹果系统怎么转换中文
  • win1020h2正式版
  • win8.1开机进入桌面
  • 谷歌安装安卓
  • ie8-ie11浏览器
  • linux系列
  • win7旗舰版怎么连接无线网络
  • linux怎样使用
  • 自定义ui界面
  • js插件写法
  • js辅助器下载
  • angular js表达式
  • js复制div
  • node通过express搭建自己的服务器
  • python制作简单图形
  • unity ngui
  • unity3d Human skin real time rendering with blood and water drop effect真实模拟人皮实时渲染之血液和水珠掉落效果
  • androidstudio快捷生成代码
  • 字典树原理
  • 河南新农合缴费记录可以在哪里查?
  • 美国对中国企业的政策
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设