vue路由详情

vue路由详情

自定义指令

1. 概念：自己定义的指令，可以封装一些dom操作，扩展额外功能

• 全局注册 - 语法 (inserted：会在指令所在的元素被插入到页面中触发，el：就是指令所绑定的元素)
• 局部注册 - 语法
• 

自定义指令 - 指令的值

1. 语法：在绑定指令时，可以通过"等号"的形式为指令绑定具体的参数值
2. . 通过binding.value可以拿到指令值，指令值修改会触发update函数
3. 指令的值的语法总结

自定义指令 - v-loading 指令封装

插槽

默认插槽

1. 作用：让组件内部的一些结构支持自定义
2. 插槽基本语法：
   • 组件内需要自定义的结构部分，改用占位
   • 使用组件时，标签内部，传入结构替换slot

插槽 - 后备内容(默认值)

1. 封装组件时，可以为预留的<slot>插槽提供后备内容(默认内容)

具名插槽

1. 多个slot使用name属性区分名字
2. template配合v-slot:名字，来分发对应标签

作用域插槽(是插槽的一个传参语法)

1. 作用域插槽：定义slot插槽的同时，是可以传值的。给插槽上可以绑定数据，将来使用组件时可以使用

2. 使用场景

3. 基本使用步骤

路由入门

单页应用程序

1. 概念：所有功能在一个html页面上实现
2. 单页和多页的区别

路由介绍

1. vue中的路由：路径和组件的映射关系

VueRouter

1. 作用：修改地址栏路径时，切换显示匹配的组件
2. 说明：vue官方的一个路由插件，是一个第三方包
3. vueRouter的使用
   

组件存放目录问题(组件分类)

1. 组件分类：.vue文件分两类，页面组件 & 复用组件 注意：都是.vue文件，本质无区别4
2. 两者分开来 更易维护

路由进阶

声明式导航 - 导航链接

1. vue-router提供了一个全局组件router-link(取代a标签)
2. 作用：
   • 能跳转，配置to属性指定路径(必须)。本质还是a标签，to无需#
   • 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

声明式导航 - 两个类名

1. 使用router-link代替a标签，会自动给当前导航添加两个高亮类名

   • router-link-active 模糊匹配(用的场景较多)：to="/my"可以匹配 /my，/my/a，/my/b
   • touter-link-exact-active 精确匹配：to="/my"只能匹配 /my

2. 自定义高亮类名

声明式导航 - 跳转传参

1. 查询参数传参

   • 语法格式如下：to=“/path?参数名=值(若有多个参数，用&分隔即可)”
   • 对应页面组件接收传递过来的值：$route.query.参数名

2. 动态路由传参

   • 配置动态路由
   • 配置导航链接：to=“/path/参数值”
   • 对应页面组件接收传递过来的值：$route.params.参数名

两种传参方式的区别

1. 查询参数传参(比较适合传多个参数)

2. 动态路由传参(优雅简洁，传单个参数比较方便)

3. 动态路由参数可选符：/search/:words 表示必须要传参数。如果不传参数也希望匹配，可以加个可选符"?"

vue路由 - 重定向

1. 说明：重定向——>匹配path后，强制跳转path路径
2. 语法：{path:匹配路径，redirect：重定向到的路径}

vue路由-404

1. 作用：当路径找不到匹配时，给个提示页面
2. 位置：配在路由最后
3. 语法：path:“*”(任意路径) - 前面不匹配就命中最后这个

vue路由 - 模式设置

1. hash路由(默认) 例如：http://localhost:8080/#/home
2. history路由(常用) 例如：http://localhost:8080/home（以后上线需要服务器支持）

编程式导航 - 基本跳转

1. 概念：用JS代码来进行跳转
2. 两种语法

   • path路径跳转(简易方便)

   • name命名路由跳转(适合path路径长的场景)

编程式导航 - 路由传参

1. path路径跳转传参

   • 查询参数传参(query传参)：

   • 动态路由传参

2. name命名路由跳转传参

   • query传参：

   • 动态路由传参
     

嵌套二级路由

1. 

组件缓存keep-alive

1. 原因：路由跳转后，组件会被销毁，返回回来组件又被重建了，所以数据会重新被加载

2. 概念：keep-live是vue的内置组件，当他包裹动态组件 时，会缓存不活动的组件实例，而不是销毁他们。keep-alive是一个抽象组件，它自身不会渲染成一个DOM元素，也不会出现在父组件链中

3. 优点：在组件切换过程中，把切换出去的组件保留在内存中，防止重复渲DOM，减少加载时间及性能消耗，提高用户体验

4. keep-alive的三个属性

5. 使用include属性配置的组件会多出两个生命周期钩子

   • actived 激活时，组件被看到时触发
   • deactivated 失活时，离开页面组件看不见