vue 路由传参

 

mode:路由的形式 用的哪一种路由

一、hash 路由 会带#号的哈希值 默认是hash路由

 

二、history路由 不会带#的

 

 

单页面开发首屏加载慢怎么解决？单页面开发首屏加载白屏怎么解决？

 

一、路由的懒加载

异步组件 (resolve)=>require(["组件的路径"],resolve);

ES6的import ()=>import("组件的路径");

 

 

二、ssr渲染 服务端渲染 nuxt

 

 

路由经常使用的配置项

path:路由请求的路径

component:路径匹配成功后须要渲染的组件或者页面

redirect:重定向

children:路由嵌套

name:命名路由 给当前路由取一个别名

props:路由解耦 路由传参的一种方式 针对动态路由

meta:路由元信息 当前路由所携带的一些信息

 

 

 

路由跳转的方式：

 

一、<a href="#/home"></a>

 

二、<router-link to="/home"></router-link>

 

to的路径会与path进行匹配，若是匹配成功会渲染component对应的组件

 

组件怎样才能在页面上进行展现 必须依赖一个内置组件

<router-view></router-view> 展现路径匹配成功之后相对应的组件

 

三、编程式导航

 

 

 

 

路由嵌套

children是一个数组 数组里面存放对象 每个对象都是下一级的路由的配置项 配置项的属性与routes里面的属性同样

 

路由传参：

 

路由的传参接收方式统一在this.$route里面

 

 

动态路由传值

在路由的配置项path中，设定传递参数的属性 方式为 /:属性.....

在路由跳转的属性中 设置属性的值 方式为 /detail/0/苹果

 

接收：this.$route.params

 

query传值

query传值?后面的参数 &进行连接 /user?name=zhangsan&age=18

 

 

传值的方式：经过?进行数据的拼接 每一个字段之间用&分隔 相似与get请求的方式

接收:this.$route.query

 

 

区别:query传值是非必须传值 动态路由传值是必需要传值

 

 

 

 

 

路由钩子函数 路由守卫

 

beforRouteEnter 路由进入以前

一、热力图

二、登录验证

三、权限验证

四、会员 VIP验证

五、验证商品携带信息是否完整

 

在当前钩子函数中是访问不到this的，由于尚未进入当前组件因此this为undefined

若是须要使用this则须要在next中使用回调,回调中的第一个参数就是组件的实例

 

 

beforRouteUpdate 路由更新的时候

当路由发生了改变，可是当前组件没有经历建立和销毁的时候，若是咱们须要接收路由传递过来的数据时

咱们就须要用到了beforRouteUpdate

 

 

 

 

beforRouteLeave 路由离开的时候

一、信息没有填写完成

二、答题系统

三、支付

四、退出登录

 

 

全局守卫 全局钩子函数

 

beforEach 通常状况下用来作一些路由公众部分的验证 登录验证

 

 

 

 

 

编程式导航

用js来实现路由的跳转

 

this.$router.push() 跳转

this.$router.go()

this.$router.back();返回

this.$router.forward()前进

this.$router.replace()替换