Vuejs学习笔记--router笔记(4.x版本)

1. 路由的监听原理：

1.1 URL的hash（通过改变URL的hash值，让页面不发生刷新）

URL的hash也就是锚点(#), 本质上是改变window.location的href属性

我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新；

hash的优势就是兼容性更好，在老版IE中都可以运行，但是缺陷是有一个#，显得不像一个真实的路径

1.2 history接口是HTML5新增的, 它有l六种模式改变URL而不刷新页面

 

2. 版本管理

vue@3.1.2 --> 最后1位（2）一般是小bug修复，中间1位（1）一般是新增功能，第一位（3）一般是大的版本更新

3. vue-router基本使用：配置（index）--安装（main）--展示（App）

4. 配置（index）

4.1 配置默认路径

4.2 配置Not Found路径

4.3 配置history模式

4.4.1 配置路由懒加载

4.4.2 打包后出现map文件

作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。所以该文件如果项目不需要是可以去除掉。

解决办法：去src/config/index.js中改一个参数：

productionSourceMap:false 

4.5 配置中的其他属性（路由嵌套）

• name属性 ：路由记录独一无二的名称
• meta属性：自定义的数据
• children属性：路由嵌套，放置子路由

4.6 动态路由的基本匹配

4.7 动态“添加”路由

 

 

4.8 动态删除路由

4.9 导航守卫beforeEach：主要用来通过跳转或取消的方式守卫导航

• to参数: Route对象, 即将跳转到的Route对象
• from参数: Route对象, 从哪一个路由对象导航过来的
• 返回值问题:
  • 1.false: 不进行导航
  • 2.undefined或者不写返回值: 进行默认导航
  • 3.字符串: 路径, 跳转到对应的路径中
  • 4.对象: 类似于 router.push({path: "/login", query: ....})

5 展示（App）router-link和router-view

5.1 router-link的参数

<router-link>组件支持用户在具有路由功能的应用中点击导航。如果通过其他方式比如this.$router.push()等方式进行了路由跳转，就不用写<router-link>了

• to属性：字符串/对象，路由对应的组件名称
• replace属性：当点击时，会调用 router.replace()，而不是 router.push()，就没有返回了
• active-class属性：设置激活a元素后应用的class，默认是router-link-active
• exact-active-class属性：链接精准激活时，应用于渲染的<a>的class，默认是router-link-exact-active，应用在路由嵌套的场景（路径完全匹配时添加）
• custom属性：表示整个元素要自定义，取消默认的a标签，一般结合使用
  • 插槽方式自定义标签（无参数）：

• • v-slot=“props”（作用域插槽）（可传参）：

• • props: href 跳转的链接
  • props: route对象
  • props: navigate导航函数
  • props: isActive 是否当前处于活跃的状态
  • props: isExactActive 是否当前处于精确的活跃状态

5.2 问题：刚才为了让路由组件之间能够跳转，我们使用了router-link标签。如果我们不想要写router-link呢？

解答：可以通过组件的$router属性实现同样的效果：

<template>
  <div id="app">
    <button @click="homeClick">首页</button>
    <button @click="aboutClick">关于</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    homeClick () {
      // 通过代码的方式修改路由 vue-router
      // this.$router.push('/home');
      this.$router.replace('/home');
    },
    aboutClick () {
      // this.$router.push('/about');
      this.$router.replace('/about');
    }
  }
}
</script>

5.3 router-view的增强

• v-slot=“props”
  • props.Component属性：要渲染的组件

5.4 编程式导航：通过代码的方式实现路由跳转（optionsAPI和compositionAPI）

5.5  补充：$router  和  $route  区别

r o u t e 就是表示，当前哪个路由处于活跃状态，这个route表示的就是哪个路由组件。

r o u t e r 是我们在router/index.js当中创建的router对象，就是路由对象。这个路由对象当中有好几个路由。哪个路由处于活跃状态，route就是表示哪个路由组件。

 

6. keep-alive使用

6.1 作用

 6.1.1 可以使被包含的组件保留状态，避免组件频繁的被创建和销毁

• 它们有两个非常重要的属性:
• include - 字符串或正则表达，只有匹配的组件会被缓存
• exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

6.2 使用

keep-alive包裹router-view时，对应所有路径的组件都会被缓存

<keep-alive exclude="Profile,User">   // exclude="Profile,User"   中间不要加空格

   <router-view></router-view>

</keep-alive>

6.3 场景应用（返回的页面处于离开时的路由页面）