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

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

  • 劳务费增值税专用发票税率是多少
  • 为员工代缴社保材料
  • 增值税报税后多久缴纳期限
  • 企业所得税发票税前扣除异常
  • 住宿发票税率有哪4种
  • 出售无形资产净收益是收入吗
  • 工伤职工应享有的待遇及救济途径
  • 企业发票专用章使用涉及的审批流程
  • 原材料被盗计入什么科目
  • 销售费用的进项税额转出会计分录
  • 公司收的保证金可以打入私人账户吗
  • 保证金转租金的会计处理
  • 我国流转税的税种组成为
  • 做税审报告费如何做分录?
  • 出口转内销增值税报表怎么填
  • 没收土地竞买保证金政策法律
  • 子公司给母公司开票
  • 销项负数发票会计摘要
  • 劳动仲裁是怎样仲裁公司的
  • 转让资产使用权收入属于什么收入
  • 增值税如何确认
  • 个人所得税工资薪金税率表
  • 营改增后的税率
  • 公户以借款形式打款给个人,对个人有影响么?
  • 购货方预付货款的分录
  • 公司对外汇款需要什么手续
  • 企业注销所得税汇算清缴
  • linux批量删除
  • 怎么用红字信息表开红字发票
  • 境内单位和个人将船舶出租到境外的,不征收车船税
  • 更改win10通知
  • 时序模型算法
  • php伪静态规则写法
  • 费用的结转是在借方还是贷方
  • 外贸企业进料加工复出口退税政策
  • 一次性取得的租金收入
  • 企业研发费用加计扣除最新政策
  • 小规模纳税人增值税免税政策
  • PHP magento后台无法登录问题解决方法
  • Apache PHP MySql安装配置图文教程
  • 个税汇算清缴时劳务报酬怎么计税
  • 所得税汇算会计处理
  • 微信交电费怎么交
  • 累计折旧如何计算使用年限
  • 房地产企业开发成本科目明细
  • mysql where join
  • 广告公司可以不开发票吗
  • 个体户定额征收后还要报税吗
  • 有形动产租赁属于经营租赁吗
  • SQL Server性能优化工具Profiler
  • 注册公司时企业类型为什么没有自然人独资
  • 确认借款无法收款怎么办
  • 以前年度少计提的工资怎么处理
  • 银行承兑汇票背面怎么填写
  • 汇算清缴资产总额全年季度平均值怎么算
  • sql-3
  • MS-SQL Server 2005 其中三个版本的比较
  • win10预览版21277
  • 启动npm服务
  • windows10点击任务栏没有反应
  • linux 桌面系统
  • windowsxp的设置在哪
  • mac怎么格式
  • mac安全设置在哪里
  • nclaunch.exe - nclaunch进程有什么用 是什么意思
  • win10驱动备份在哪里
  • edge新版浏览器
  • win10安装vc++6.0
  • 怎么关闭win10系统
  • win10 mobile 1709
  • 'GL_COMBINE_ARB' : undeclared 'GL_RGB_SCALE_ARB' : undeclared 问题
  • vuex状态机
  • js控制style
  • 对xmlHttp对象方法和属性的理解
  • python模拟操作
  • 简单的智能家居
  • jquery返回顶部代码
  • 湖南省五一劳动奖章
  • 农村摩托车上牌要什么证件和手续
  • 个人股权转让是否增值了怎么判断
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设