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

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

  • 小型微利企业所得税计算公式2023
  • 增值税月末结转还是年末结转
  • 所得税会计与财务会计比较研究
  • 关联方交易金额含税吗
  • 公司现金账户归谁管
  • 超过缴款期限缴纳税款
  • 小汽车的增值税怎么算
  • 零申报失败什么原因
  • 农产品核定扣除增值税进项税额计算表
  • 模具费入什么会计科目
  • 挖掘机要交多少个人所得税
  • 资产损失税前扣除是什么意思
  • 装修费属于劳务费吗
  • 公司购买环保材料会计分录
  • 简易征收工程款可以抵扣吗?
  • 个体户财务章必须刻吗
  • 金融服务公司收取金融服务费
  • office已经激活
  • 个人所得税征收范围
  • 鸿蒙怎么添加
  • windows11 怎么更新
  • 银行保证金户利息计算公式
  • php查找文件目录下文件
  • 公账如何存钱
  • 一台电脑两个显示器显示不一样的内容
  • PHP:pg_result_error()的用法_PostgreSQL函数
  • 猫鼬家族风云
  • 进口付汇流程
  • 出口退税退的是啥
  • php ftp函数
  • 深入解析windows第7版卷2
  • thinkphp上传文件
  • php自定义表单系统
  • js怎么实现倒计时
  • php面向对象优点,缺点
  • 银行承兑汇票应由在承兑银行开立存款账户的存款人签发
  • php错误和异常
  • 所有者权益是什么类科目
  • 发票章没有盖好
  • 行政单位预算外收入有哪些
  • 怎么解决食堂拥挤问题
  • phpcms api
  • 公司的违约金
  • 收购企业怎么做账
  • 汽油费入什么会计分录
  • 防暑降温费用发放标准
  • 支付劳务费未开具发票
  • mysql备份模式
  • 分派现金股利处理
  • mysql的主从
  • 营业成本怎么理解
  • 应付职工薪酬和生产成本的区别
  • 农产品加工会计分录
  • 餐饮会计内账怎么记账
  • 委托代理进出口
  • 资本化支出计入什么科目
  • 企业贷款业务
  • 预算收入包括增值税吗
  • 抵扣认证的发票怎么做账
  • 每月分红会计分录
  • 防盗信息
  • apache禁用trace方法
  • win8电脑触摸屏没反应怎么办
  • 怎样一键清空
  • centos进入指定目录
  • win7系统宽带连接651
  • win8.1网络设置
  • linux中的top命令
  • win10 edge浏览器
  • 列举linux常用的几个命令
  • linux挂载的概念
  • 怎样判断滚动和滑动
  • perl常用函数
  • perl调试
  • unity hover
  • 动态加载原理
  • android开发中默认的数据库
  • python append 浅拷贝
  • 企业所得税法中所称有关的支出是指
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设