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.页面之间的跳转用时长,用户体验差