Vue路由知识点

VUE中有关路由的知识点

一.
1.后端渲染：页面在后端渲染后直接传到客户端显示。
2.后端路由：后端处理URL和页面之间的映射关系。
后端路由的缺点：HTML代码和数据以及逻辑关系都会混在一起，不利于为何和编写。
3.前端渲染：浏览器中的网页中的大部分内容，都是前端写的j代码在浏览器中执行，最后渲染出来的。
4.前端路由：前端处理URL和页面之间的映射关系
SPA: (simple page application)单页面富应用，最大的特点就是在前后端分离的基础上加了一层前端路由。
spa：整个网页只有一个页面。

二.
前端路由的核心：改变URL，整个页面不进行刷新
方法一： hash
location.hash=‘url’
方法二：history方法
push（）
replace（）

三.
路由懒加载：
为什么要懒加载？
答：当打包构建应件时，js的代码会变得非常大，影响页面加载
*主要作用是将路由对应的组件打包成一个一个小的js代码块。
*只有在这个路由被访问的时候，在加载对应的组件。

URL:
协议://主机:端口/路径?查询
scheme://host:port/path?query#fragment

四.
Router传递数据的方式
1.params的类型
**配置路由格式/router/:id
传递的方式：在path后面更上对应的值
传递后形成的路径：/router/123，/router/abc

2.query的类型
配置路由格式：普通配置格式 path:’’，component：组件名
传递的方式：对象中使用query的key作为传递方式
传递后形成的路径：/router？id=123，router？id=abc

五.
$router和$route的区别

• $router是VUERouter实例，想要导航到不同RUL，则使用$router.push方法
• $route为当前router跳转对象，里面可以回去name、path、query、params等（this.route指向当前活跃的路由）

六.
keep-alive是Vue内置的一个组件，可以使包含的组件保留状态，或避免重新被渲染、
** 两个重要属性
include ：字符串或正则表达式，只有匹配的组件会被缓存
exclude：字符串或正则表达式，只有匹配的组件不会被缓存

router-view也是一个组件，如果直接被包在keep-alive里面，所有路径匹配的视图组件都会被缓存

七.
路由的基本使用
1.安装vue-router
2.Vue.use->创建VueRouter对象->挂在到Vue实例上
3.配置映射关系：
1.创建组件
2.配置映射关系
3.使用router-link/router view