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

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

  • sony psp3000开不了机(sony psp3000)(索尼psp2000开机)

    sony psp3000开不了机(sony psp3000)(索尼psp2000开机)

  • opporeno4的屏幕刷新率是90hz吗(opporeno4se刷屏率设置)

    opporeno4的屏幕刷新率是90hz吗(opporeno4se刷屏率设置)

  • 双十一订单最迟多久发货(双十一订单最迟几点发货)

    双十一订单最迟多久发货(双十一订单最迟几点发货)

  • 微信账号注销后的样子(微信账号注销后聊天记录还能恢复吗)

    微信账号注销后的样子(微信账号注销后聊天记录还能恢复吗)

  • qq星标是什么(qq星标好友在哪里)

    qq星标是什么(qq星标好友在哪里)

  • 户户通机顶盒怎么连接电视机(户户通机顶盒怎么升级)

    户户通机顶盒怎么连接电视机(户户通机顶盒怎么升级)

  • 小维智慧家庭协议出错什么意思(小维智慧小家庭)

    小维智慧家庭协议出错什么意思(小维智慧小家庭)

  • 抖音直播举报人的时候会不会被对方发现(抖音直播举报人是什么后果)

    抖音直播举报人的时候会不会被对方发现(抖音直播举报人是什么后果)

  • 腾讯课堂老师能听到学生说话吗(腾讯课堂老师能用ipad上课吗)

    腾讯课堂老师能听到学生说话吗(腾讯课堂老师能用ipad上课吗)

  • 华为mate30pro夜景模式怎么设置(华为mate30pro夜景教程)

    华为mate30pro夜景模式怎么设置(华为mate30pro夜景教程)

  • 支付宝购物在哪里查看(支付宝购物在哪里查看发货信息)

    支付宝购物在哪里查看(支付宝购物在哪里查看发货信息)

  • 抖音要审核多久(抖音审核多久上热门)

    抖音要审核多久(抖音审核多久上热门)

  • 乐视手机怎么卸载软件(乐视手机怎么卸载乐视搜狗输入法软件)

    乐视手机怎么卸载软件(乐视手机怎么卸载乐视搜狗输入法软件)

  • 华为mate30声音键在哪里(华为mate30声音键会无故自己调大)

    华为mate30声音键在哪里(华为mate30声音键会无故自己调大)

  • 手机wps删除空白页面(手机wps如何删除空白)

    手机wps删除空白页面(手机wps如何删除空白)

  • 苹果11怎么切换双卡(苹果11怎么切换5g网络)

    苹果11怎么切换双卡(苹果11怎么切换5g网络)

  • wps怎么在字上面加横线(wps怎么在字上面加黑点)

    wps怎么在字上面加横线(wps怎么在字上面加黑点)

  • 苹果支持多少w无线充电(苹果支持多少w快充)

    苹果支持多少w无线充电(苹果支持多少w快充)

  • iphone11怎么截图(iphone11怎么截图长屏幕)

    iphone11怎么截图(iphone11怎么截图长屏幕)

  • wps里怎么查找内容(wps怎么查找内容全部导出)

    wps里怎么查找内容(wps怎么查找内容全部导出)

  • mp1718是什么处理器(mp174)

    mp1718是什么处理器(mp174)

  • oppo手机通用设置在哪(oppo手机通用设置在哪里)

    oppo手机通用设置在哪(oppo手机通用设置在哪里)

  • 拼多多砍价成功后多久发货(拼多多砍价成功截图)

    拼多多砍价成功后多久发货(拼多多砍价成功截图)

  • js添加元素的方式(js添加方法)

    js添加元素的方式(js添加方法)

  • 什么是Python中的闭包(什么叫python)

    什么是Python中的闭包(什么叫python)

  • 土地增值税的计算方法公式
  • 放弃退税理由是什么
  • 车船使用税会打折么
  • 幼儿园经营支出指什么
  • 固定资产盘盈影响所有者权益吗
  • 注册公司工贸和商贸区别
  • 广告公司个人所得税几个点
  • 交强险可以打折扣吗
  • 个人所得税算错
  • 包装纸箱属于原材料吗
  • 个人开发者什么意思
  • 房地产企业城建税预缴可以抵扣吗
  • 资质挂靠人员需要交个税吗?
  • 服务的进项税
  • 携税宝报税流程
  • 超市预付卡开票内容
  • 广告业的定额发票可以税前扣除么?
  • 固定资产折旧税务处理
  • 个体户可以不领税控盘吗
  • 建筑材料营改增之前怎么开发票
  • 进项税大于销项税是不是不用交税了
  • 增值税纳税申报表在哪里打印
  • 个人独资企业生产经营费用与家庭生活费用
  • 购买方现金折扣计入什么科目
  • 手机文件打开方式怎么设置默认
  • 种植业土地租赁计入哪个科目
  • 开成品油发票要注意什么?
  • 脚手架属于什么费用
  • 财务软件上线需注意什么
  • 简易计税 科目
  • springboot上传文件大小设置
  • deepin缩放
  • PHP:oci_fetch_all()的用法_Oracle函数
  • 最大交易笔数什么意思
  • 胡山森林公园门票多少钱一张
  • 商业汇票的承兑银行必须具备下列条件
  • 帮人开票怎么计算税点金额
  • init 4命令
  • 最好用的电脑强力卸载软件
  • 带折扣的发票如何入账
  • 行政事业单位福利费列支范围及标准2023
  • 房产原值是含税还是不含税
  • 无偿调入固定资产怎么入账
  • 退税已到账还可以更改吗
  • 差旅费跨年报销违反什么规定
  • 盈余公积提取是什么意思
  • 设计协会会长
  • 长期股权投资中同一控制和非同一控制的区别
  • 小规模印花税有减免政策吗
  • 长期股权投资会计实训心得
  • 外币交易的账户设置
  • 企业利润分配应当遵循的原则
  • 建筑业收入叫什么
  • 哪些行业不适用作业法
  • 专利年费可以减免吗
  • 无票收入怎么写分录
  • 如何在sql server表中添加数据表格为什么没有显示
  • 卡巴斯基反病毒软件
  • linux 删除重复文件
  • 如何删除已下载的windows更新
  • windows临时文件在哪里
  • 苹果mac安装win10系统
  • VirtualBOX给CentOS建共享文件夹的方法
  • 2015.6.28开始写博客记录cocos2dx学习历程
  • selenium csdn
  • cocos2048
  • unity2d 阴影
  • 国际安卓应用市场
  • css如何实现
  • css怎么控制图片位置
  • android ios UI
  • shell脚本sudo免输密码
  • linux shell脚本编程100例
  • js如何实现单例模式
  • javascript 加法
  • JavaScript中Textarea滚动条不能拖动的解决方法
  • 农业方面有哪些有名杂志
  • 吉林省耕地占用税实施办法
  • 赞颂税务工作者绝句
  • 普洱房产管理局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设