Vue2 VueRouter学习笔记

VueRouter

官方文档
版本对应
vue2：3.x.x
vue3：4.x.x

路由：访问路径与vue组件（页面）之间的映射关系
VueRouter：Vue官方提供的插件，本质上是一个 JavaScript 库，用于在 Vue.js 应用中实现路由功能

这里以vue2项目为例，版本3.6.5

1. 配置插件

VueRouter是一个第三方js库，类比axios，需要先下载，然后导入到项目中
下载：

npm install vue-router@3.6.5

导入：

import VueRouter from 'vue-router';

注册插件：把插件的功能添加到Vue构造函数中，给Vue实例对象添加了router和route属性

Vue.use(VueRouter);

创建路由器实例：

const router = new VueRouter({routes: []
});

把路由器注入到Vue实例：给router属性赋值

new Vue({el: '#app',router, // 将路由器传递给 Vue 实例 router: routerrender: h => h(App)
});

2. 基本使用

vue组件可以当页面，也可以当标签组件，页面组件一般写在views目录下

下面我准备了3个页面

注册路由

import FindMusic from './views/FindMusic.vue'
import MyInfo from './views/MyInfo.vue'
import MyFriends from './views//MyFriends.vue'...const router = new VueRouter({routes:[{ path: '/find', component: FindMusic },{ path: '/friend', component: MyFriends },{ path: '/me', component: MyInfo }]
})...

使用

<template><div id="app"><div class="nav"><a href="#/find">发现音乐</a><a href="#/friend">我的好友</a><a href="#/me">我</a></div><div><router-view></router-view></div></div>
</template>

效果如下：

3. 项目开发

新建一个router目录用来存放router对象，用来专门维护路由
最后在main.js中导入这个对象就可以了

修改代码，index.js内容如下：

import Vue from 'vue'
import VueRouter from 'vue-router'import FindMusic from '@/views/FindMusic.vue' // src目录 = @
import MyInfo from '@/views/MyInfo.vue'
import MyFriends from '@/views//MyFriends.vue'Vue.use(VueRouter)const router = new VueRouter({routes:[{ path: '/find', component: FindMusic },{ path: '/friend', component: MyFriends },{ path: '/me', component: MyInfo }]
})export default router

声明式导航

单纯使用a标签进行界面跳转，需要记住当前所在的路由页面以实现高亮效果
vue-router提供了一个全局组件 <router-link>取代a标签，本质上就是在a标签的基础上简化了代码

<router-link to="/find">发现音乐</router-link>
<router-link to="/friend">我的好友</router-link>
<router-link to="/me">我</router-link>

• 使用to代替href，可以不用写#号
• 给当前路由页面对应的a标签自动添加了类：router-link-active，给该类添加样式实现高亮
  router-link-active只要界面在一级目录下，就可高亮，用的多
  router-link-exact-active界面必须在指定界面才高亮
  这两个类名可以自定义，上面的是默认值

  a.router-link-active {color: gold;}
  

  

跳转传参

本质上就是给目标组件对象传值。在注册路由的时候，相当于把route对象赋值给了目标组件的route属性了，你也可以通过给route对象设置属性传值

1 查询参数传参
传过去就是url传参的原理，to里面/path?参数名1=值1&参数名2=值2
拿值：在当前组件的route属性里拿，this.$route.query.参数名

演示：

<router-link to="/find?key=你好">发现音乐</router-link>

2 动态路由传参（适合单个参数）
路由：/path/:参数名 后面加个?表示参数非必须
to：/path/参数值
获取：this.$route.params.参数名

重定向
redirect: 目标路径

当路由定位不到，找不到页面的时候可以配置404页面，但是必须在最后一个注册，path:'*'

跳转不出现#号
hash模式：基于a标签，带#号
history模式：不带#号，常用，h5新增，需要服务端支持

编程式导航

通过js代码实现页面跳转，可以通过触发事件实现跳转

可以这样理解（实际更复杂），router对象中维持了一个栈（先进后出）。如果需要跳转路由，相当于将一个route对象添加进栈

this.$router.push({ path: '/user', query: { id: 123 } });// 如果路由可以直接写路径或者route对象的name
this.$router.push('/user');

参数多的话写对象会更方便一点

类比分析
进栈：this.$router.push() 将新路由添加到浏览器的历史记录中，就像将一个新元素压入栈中。
出栈：this.$router.go(-1) 或 this.$router.back() 会让浏览器回到上一个历史记录条目，就像从栈顶弹出元素。
栈顶：当前显示的路由相当于栈顶的元素，是最近的导航记录。

二级路由

注册组件时，route对象中children:[ ]实现嵌套路由

export default new Router({mode: 'history', // 使用历史模式以避免 URL 中的 hashroutes: [{path: '/parent',component: ParentComponent,children: [{path: 'child-a', // 注意这里不需要 /parent/ 的前缀component: ChildComponentA},{path: 'child-b',component: ChildComponentB}]}]
});

组件缓存

主要用途是在切换组件时，保持组件的状态和避免不必要的重新渲染，提高性能
使用<keep-alive>标签包裹着的组件，会自动实现组件缓存

直接用<keep-alive>包裹<router-view>会缓存所有下面的组件，需要控制缓存的行为

<keep-alive> 属性：

• include: 仅缓存匹配的组件。可以传递一个字符串、正则表达式或数组。
• exclude: 排除匹配的组件，不缓存它们。也可以传递字符串、正则表达式或数组。
• max: 最大缓存组件数。当缓存的组件数超过这个值时，最久未使用的组件会被销毁。

底层：给需要缓存的组件生命周期中添加了两个钩子，disactivated() 和 activated()

• activated(): 恢复并可见时的调用（类似于 Android 的 onResume()）。
• deactivated(): 处理组件从视图中移除但仍在缓存中时的操作（类似于 Android 的 onPause()）。