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

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

  • 认证域名时提示社会信用代码输入格式不正确怎么办?

    认证域名时提示社会信用代码输入格式不正确怎么办?

  • b站怎么用uid搜索用户(b站app怎么搜uid)

    b站怎么用uid搜索用户(b站app怎么搜uid)

  • 小米10快充需要设置吗(小米10快充需要专用数据线吗?)

    小米10快充需要设置吗(小米10快充需要专用数据线吗?)

  • 全站仪dhd和dz是什么意思(全站仪里面dhd表示什么)

    全站仪dhd和dz是什么意思(全站仪里面dhd表示什么)

  • 抖音手机号注销了还能登录吗(抖音手机号注销了还能重新注册吗)

    抖音手机号注销了还能登录吗(抖音手机号注销了还能重新注册吗)

  • 积目拉黑后对方能看到我吗(积目拉黑后对方能看到我照片吗)

    积目拉黑后对方能看到我吗(积目拉黑后对方能看到我照片吗)

  • 抖音什么是营销号(抖音什么是营销属性视频)

    抖音什么是营销号(抖音什么是营销属性视频)

  • 荣耀10怎么设置24小时(荣耀10怎么设置灭屏显示时间)

    荣耀10怎么设置24小时(荣耀10怎么设置灭屏显示时间)

  • 饿了么头像怎么改不了(饿了么头像怎么查看大图)

    饿了么头像怎么改不了(饿了么头像怎么查看大图)

  • 买手机自带的膜是什么膜(买手机自带的膜好,还是钢化膜好)

    买手机自带的膜是什么膜(买手机自带的膜好,还是钢化膜好)

  • 微博如何取消水印(微博如何取消水印保存)

    微博如何取消水印(微博如何取消水印保存)

  • qq3g在线能收到消息吗(qq显示3g在线,能收到信息吗)

    qq3g在线能收到消息吗(qq显示3g在线,能收到信息吗)

  • 文本文件可以直接在word中处理吗(文本文件可以压缩吗)

    文本文件可以直接在word中处理吗(文本文件可以压缩吗)

  • 菜鸟垫付账户的钱在哪(菜鸟垫付账户的钱怎么取)

    菜鸟垫付账户的钱在哪(菜鸟垫付账户的钱怎么取)

  • 手机的位置服务怎么打开(免费查找别人手机位置软件)

    手机的位置服务怎么打开(免费查找别人手机位置软件)

  • 苹果卡贴机lte怎么变4g(苹果卡贴机lte怎么改成4g移动)

    苹果卡贴机lte怎么变4g(苹果卡贴机lte怎么改成4g移动)

  • vivo视频通话在哪设置

    vivo视频通话在哪设置

  • 小米手环3怎么开启nfc功能(小米手环3怎么解绑)

    小米手环3怎么开启nfc功能(小米手环3怎么解绑)

  • 小米6升级MIUI11会降频吗(小米6升级miui11卡在80.99)

    小米6升级MIUI11会降频吗(小米6升级miui11卡在80.99)

  • 软件危机的定义及表现(软件危机的定义和原因)

    软件危机的定义及表现(软件危机的定义和原因)

  • 苹果手机亮度怎么固定(苹果手机亮度怎么会自动变暗)

    苹果手机亮度怎么固定(苹果手机亮度怎么会自动变暗)

  • 公众号留言功能恢复(公众号留言功能怎么开启)

    公众号留言功能恢复(公众号留言功能怎么开启)

  • 笔记本电池消耗,自己应该多注意(笔记本电池消耗大怎么办)

    笔记本电池消耗,自己应该多注意(笔记本电池消耗大怎么办)

  • vue自适应布局(各种浏览器,分辨率)(vue 响应式自适应布局)

    vue自适应布局(各种浏览器,分辨率)(vue 响应式自适应布局)

  • 什么情况下不能做近视激光手术
  • 工商年报多久能显示
  • 公司收据收款人怎么写
  • 防伪开票系统技术维护费怎么做分录
  • 利润表报错了怎么撤回修改
  • 退去年的教育费附加
  • 应收账款未收到回函的替代程序
  • 航运(集团)招聘
  • 增值税发票抵扣勾选平台如何操作
  • 记账汇率是什么意思
  • 微信公众订阅号怎么注册
  • 中国银行结算包括哪些内容?怎么做会计分录?
  • 社保可以在税前扣除吗
  • 生产型企业出口非自产产品能享有退税吗
  • 上月开票次月开红票销项税额有什么影响?
  • 月工资和账户工资区别
  • 税务行政强制行为遵循的原则
  • 没给顾客发票需要罚款吗
  • 进项税留抵需要转出吗
  • 管理费用和财务费用在资产负债表怎么填
  • 固定资产不入账是谁的责任
  • 金税盘减免税款怎么结转
  • 当期费用包括哪些科目
  • 购买的烟酒怎么入账科目
  • thinkphp5控制器
  • 微信支付宝转账最新规定
  • 银行结算账户的种类
  • .hpp是什么文件
  • thinkphp5 分页
  • php curl_init
  • PHP:mcrypt_ecb()的用法_Mcrypt函数
  • PHP:mcrypt_cfb()的用法_Mcrypt函数
  • php__call
  • 持有至到期减值准备是什么科目
  • 权益工具与金融负债的转换
  • 共轭梯度法matlab代码
  • 无票收入需要开票吗
  • 文心一格百度
  • php获取用户信息
  • stp 命令
  • 如何开具电子发票广东
  • 公司房租收据怎么写
  • 公司食堂的费用分录
  • sqlsever修改数据
  • 含税采购金额怎么算
  • 确认收入时还没交税
  • 个人所得税应补退税额怎么查
  • 房地产预缴所得税的计税基础
  • 对公账户给别人走账
  • 什么情况没有排卵期
  • 购买其他权益工具投资公允大于我支付的价值
  • 购入固定资产的现金流量项目
  • 销售款退回会计分录
  • 结转成本按照销售收入来结转,税要怎么算
  • 赠送成本的会计分录
  • 领用包装物的会计处理
  • 未实现融资收益借贷方向
  • 中小企业筹资渠道和筹资方式
  • mysql查询分组后 组内数据
  • mysql5624安装教程
  • Mysql中几种插入效率的实例对比
  • fedora安装xorg
  • fedora安装中文语言包
  • win7键盘没反应是怎么回事
  • ubuntu20.04升级20.10
  • windows10推送
  • win10mobile下载官网
  • 电脑safari点击没反应
  • win7系统自带的截屏工具怎么打开
  • android:ListView的局部刷新
  • Xcode6 和 Cocos2dx3.1以下版本的不兼容问题
  • macos mono
  • yarn功能
  • 关于Colloder事件
  • js中的
  • javascript的介绍
  • 税控发票开票软件金税盘版发票未报送什么情况?
  • 最新专票税率几个档
  • 国税局可以办理什么业务
  • 两会热点有哪些呀?
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设