Vue第六天笔记

目录

一、路由的配置

1.路由完整配置六个流程

 2.路由两种模式的区别(面试)

3.路由器的重定向

二、页面转跳传参 

**routes,router,$route,$router区别**

1).声明式导航(两种)

2).编程式导航(两种)

 三、二级路由

 四、导航守卫

 五、keep-alive

---

 

一、路由的配置

1.路由完整配置六个流程

• 1.导入组件
• 2.创建routes路由规则（路径和页面一一对应）
• 3.创建路由对象
• 4.把路由对象挂载到App.vue
• 5.在页面写路由导航router-link （生成a标签）
• 6.在页面写路由出口router-view (生成占位盒子，用于显示页面内容)

 

 

 

 

 2.路由两种模式的区别(面试)

默认是hash模式:原理是hash值监听,改变页面的hash值.

history模式:原理是改变路径,需要服务器配置

官网介绍:不同的历史模式 | Vue Router

区别:

(1)路径不同:hash值有#号,history模式没有#号

(2)history模式会给服务器发送请求,需要服务器但单独配置(后端负责)

3.路由器的重定向

• • 重定向应用场景： 页面输入根路径/ , 自动跳转到首页

  • 注意点 : 重定向只是修改路径， 还需要单独去设置路由匹配规则

 

 

• 1.*的作用类似于通配符：表示任意路径

• 2.默认情况下，当我们输入网址的时候。 vue会从routes数组中依次去匹配路径，如果上面的全部无法匹配就会跳转*对应的组件页面

  • 这一点跟nodejs那个404的原理基本类似

二、页面转跳传参 

**routes,router,$route,$router区别**

routes:在main或者index.js中写的路由规则

router:在main或者index.js中写的路由对象

$route:路由对象(接收参数的)

$router:router是VueRouter的实例方法，相当于一个全局的路由器对象，作用是进行路由跳转的

1).声明式导航(两种)

1.*在路由导航中直接传参<router-link to="/friend?name=坤坤&age=20">朋友(声明式)</router-link> 

 查询参数:'/路径?参数名=参数值'

获取:$route.query

2.路径参数

路由规则中:{path:'路径/:参数名/:参数名',component:组件}

传参:to="/路径/参数值/参数值"

获取: $route.params

 

 

2).编程式导航(两种)

1.*将路由导航改为a标签 添加点击事件(需要写阻止默认跳转修饰符.prevent)

查询参数:this.$router.push({path:'路径',query:{参数}})

获取:$route.query

 2.*需要在路由规则中设置路由名

 查询参数:this.$router.push({name:'friend',params:{name:'峰峰',age:25}})

获取 :$route.query

**两者的区别是query是路径传参,刷新后页面还存在.params是内存传参,刷新后参数消失.

 

 三、二级路由

 **在main或者index文件中的一级路由规则中继续设置二级路由规则和导入组件,再在一级路由组件中添加路由导航和路由出口.

 四、导航守卫

导航守卫:路由跳转是需要执行的一个钩子函数

拦截器和导航守卫的异同点:

1.相同点

(1)都是钩子函数(回调函数的一种,到某个时机了自动触发)

(2)都是起到拦截作用

2.不同点

(1)功能不同 : axios拦截器拦截网络请求, 导航守卫拦截路由跳转

(2)应用场景不同 :

axios拦截器一般用于发送token

导航守卫用于页面跳转权限管理(有的页面可以无条件跳转,例如商城首页可以无条件跳转。有的页面需要满足条件才能跳转，例如购物车页面就需要用户登录才可以跳转)

 

• 前置守卫：跳转前执行(前置使用的多,一般设置全局)

• 后置勾子：跳转后执行

 

 五、keep-alive

keep-alive作用：keep-alive是vue内置的组件，把组件给缓存起来避免销毁
(1)默认情况下keep-alive会缓存所有组件
(2)include="组件名，组件名”  缓存指定组件
(3)exclude="组件名，组件名”  不缓存指定组件
(4)缓存组件钩子
activated激活：正在使用中
deactivated失活：在缓存中