vue(5)—路由–2019.5.24学习笔记

vue(5)—路由–2019.5.24学习笔记

路由
根据用户请求路径的不同返回不同的页面或者数据

前端路由
不会经过服务器 根据hash值一个变化切换不同的页面 路由切换页面的时候页面是不会刷新

在vue中使用插件的步骤
1.引入vue
2.引入插件
3.使用插件 Vue.use()

当路由配置成功以后Vue中就会多了两个内置组件
<router-view></router-view> 当路径匹配成功后 router-view用来显示相对应的组件
<router-link></router-link>
1.做路由的跳转 必须要添加一个属性 to:跳转的路径
2.除此之外 router-link 身上还有一个tag属性 指定router-link渲染成指定的标签

路由的配置
mode:路由的形式 hash路由 history路由
一般用hash路由 使用history路由,需要进行后端配置
routes:[] 每一个路由页面的配置项

routes中的配置项
path:”路径匹配的路径”
component:当路径匹配成功需要渲染的组件
redirect:重定向
children:路由嵌套的配置项 这个属性和routes一样 嵌套二级路由
路由嵌套中path只需要写路径名称即可
应用:只变化内容区时可使用
name:当前路由的名称
props:路由解耦

路由传值的方式:
一.动态路由
传值
1.定义路由时,设置传递数据的key值 path:”/路由地址/:key1/key2″ key1 key2代表数据的键值
2.在做路由跳转的时候定义传递的数据 to=”/路由地址/参数1/参数2″
3.在需要接收信息的组件内部通过this.$route.params进行接收
二.query传值
流程:
1.通过query的方式进行数据的传参 key=val&key=val
所谓的query传值其实就是我们常说的get传值的方式 通过?后面进行拼接
2.接收的时候通过this$route.query进行接收
三.路由解耦(只适合动态路由传值)
1.在定义路由的时候添加一个属性props:true
2.接受的时候只需要通过props进行接收即可
query传值 和params传值 的区别?
前者的参数可传可不传
params用的比较多,参数是必须要传递的

编程式导航
路由跳转的方式
1.a标签跳转 <a href=”#/需要跳转的页面”></a>
2.组件 router-link
3.编程式导航 通过js进行路由的跳转
this.$rounte.push 跳转
this.$rounte.back 后退
this.$rounte.forward 前进
this.$rounte.replace 替换

单页面开发和多页面开发优缺点
单页面开发:SPA 只有一个主页面的应用,浏览器一开始要加载所有必须的 html, js, css
优点:
1.良好的交互体验
2.良好的前后端工作分离模式
3.减轻服务器压力
缺点:
1.不利于SEO优化
2.不能使用前进后退功能
3.初次加载耗时长
4.页面复杂度高

多页面开发:MPA 一个应用中有多个页面,页面跳转时是整页刷新
优点:
1.内容承载率大
2.有利于SEO优化
3.开发成本低
缺点:
1.代码重复度大
2.网站后期维护难度大
3.页面之间的跳转用时长,用户体验差

转载于:https://www.cnblogs.com/M29006/p/10920298.html

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/100900.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 常见雪球期权总结_雪球期权和凤凰期权的区别

    常见雪球期权总结_雪球期权和凤凰期权的区别常见雪球期权总结从风险溢价的角度来看,雪球类产品的本质是买方通过承担下跌的尾部风险,换取远超无风险利率的票息收入。对尾部风险的承担则是通过成为看跌期权卖方的形式实现的。标准雪球期权标准雪球期权(

  • JAX-WS与JAX-RS区别是什么?

    JAX-WS与JAX-RS区别是什么?一、JAX-WS:全称是JavaTMAPIforXML-BasedWebServicesJAX-RS:全称是JavaTMAPIforRESTfulWebServices关于JAX-WS与JAX-RS两者是不同风格的SOA架构。前者以动词为中心,指定的是每次执行函数。而后者以名词为中心,每次执行的时候指的是资源。二、JAX-RS是JAVAEE6引入的一个新技术。JAX…

  • 广义表_数据结构广义表的长度和深度

    广义表_数据结构广义表的长度和深度概念广义表(GeneralizedLists)是n(n≥0)个数据元素a1,a2,…,ai,…,an的有序序列,一般记作:ls=(a1,a2,…,ai,…,an)其中:ls是广义表的名称,

  • 语音_波束形成

    语音_波束形成博客目的:构架语音波束形成的知识体系和资料汇总1.基本概念1.1全向(omnidirectional)与指向(sensitivity)的概念理想的全向麦克理想的指向麦克tips:全指向咪头and单指向咪头全指向咪头的特点:收…

  • MySQL1054错误_mysql错误代码1064

    MySQL1054错误_mysql错误代码1064问题解释:Duplicateentry‘…’forkey‘PRIMARY,即插入数据时,要插入数据的主键数据(…)已经存在,不能再重复添加了。例:Duplicateentry‘0’forkey‘PRIMARY是指主键为0的数据已经存在,不能再插入主键值为0的数据了。问题解决:在执行插入操作insert前,可以先执行一遍该主键值的查找操作select,例如:执行插…

  • 回溯算法 js_回溯算法代码

    回溯算法 js_回溯算法代码回溯算法是算法设计中的一种回溯算法是一种渐进式寻找并构建问题解决方式的策略回溯算法会先从一个可能的动作开始解决问题,如果不行,就回溯并选择另一个动作,直到将问题解决使用场景有很多路在这些路中,有死路和出路通常需要递归来模拟所有的路leetcode46:全排列解题思路要求:1所有排列情况;2没有重复元素有出路有死路使用回溯算法解题步骤用递归模拟出所有情况遇到包含重复元素的情况,就回溯收集所有到达递归终点的情况,并返回code//时间复杂度O.

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号