vue 路由传参

 

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

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

 

2、history路由 不会带#的

 

 

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

 

1、路由的懒加载

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

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

 

 

2、ssr渲染 服务端渲染 nuxt

 

 

路由常用的配置项

path:路由请求的路径

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

redirect:重定向

children:路由嵌套

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

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

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

 

 

 

路由跳转的方式：

 

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

 

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

 

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

 

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

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

 

3、编程式导航

 

 

 

 

路由嵌套

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

 

路由传参：

 

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

 

 

动态路由传值

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

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

 

接收：this.$route.params

 

query传值

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

 

 

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

接收:this.$route.query

 

 

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

 

 

 

 

 

路由钩子函数 路由守卫

 

beforRouteEnter 路由进入之前

1、热力图

2、登陆验证

3、权限验证

4、会员 VIP验证

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

 

在当前钩子函数中是访问不到this的，因为还没有进入当前组件所以this为undefined

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

 

 

beforRouteUpdate 路由更新的时候

当路由发生了改变，但是当前组件没有经历创建和销毁的时候，如果我们需要接收路由传递过来的数据时

我们就需要用到了beforRouteUpdate

 

 

 

 

beforRouteLeave 路由离开的时候

1、信息没有填写完成

2、答题系统

3、支付

4、退出登陆

 

 

全局守卫 全局钩子函数

 

beforEach 一般情况下用来做一些路由公众部分的验证 登陆验证

 

 

 

 

 

编程式导航

用js来实现路由的跳转

 

this.$router.push() 跳转

this.$router.go()

this.$router.back();返回

this.$router.forward()前进

this.$router.replace()替换