vue重修之路由【下】

文章目录

版权声明
路由重定向、404，路由模式
- 重定向
- 404
- 路由模式
声明式导航
- vue-router
- router-link-active 和 router-link-exact-active
- 定制router-link-active 和 router-link-exact-active
- 跳转传参
- 两种跳转传参总结
编程式导航
- 两种语法
- 路由传参
- - path路径跳转传参
  - name命名路由传参
缓存组件
- keep-alive初识
- 额外的两个生命周期钩子

版权声明

本博客的内容基于我个人学习黑马程序员课程的学习笔记整理而成。我特此声明，所有版权属于黑马程序员或相关权利人所有。本博客的目的仅为个人学习和交流之用，并非商业用途。
我在整理学习笔记的过程中尽力确保准确性，但无法保证内容的完整性和时效性。本博客的内容可能会随着时间的推移而过时或需要更新。
若您是黑马程序员或相关权利人，如有任何侵犯版权的地方，请您及时联系我，我将立即予以删除或进行必要的修改。
对于其他读者，请在阅读本博客内容时保持遵守相关法律法规和道德准则，谨慎参考，并自行承担因此产生的风险和责任。本博客中的部分观点和意见仅代表我个人，不代表黑马程序员的立场。

路由重定向、404，路由模式

重定向

在这里插入图片描述

问题：网页打开时， url 默认是 / 路径，未匹配到组件时，会出现空白
解决方案：重定向 → 匹配 / 后, 强制跳转 /home 路径
语法： { path: 匹配路径, redirect: 重定向到的路径 }

代码演示

const router = new VueRouter({routes: [{ path: '/', redirect: '/home'},...]
})

404

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

import NotFind from '@/views/NotFind'
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '*', component: NotFind }]
})

NotFound.vue

<template><div><h1>404 Not Found</h1></div>
</template><script>
export default {}
</script><style></style>

路由模式

Vue Router 支持两种路由模式：
- hash路由(默认) 例如: http://localhost:8080/#/path
- history路由(常用) 例如: http://localhost:8080/path

Hash 模式 (默认模式)：
- 在 URL 中带有 #，例如 http://example.com/#/path。
- 使用 window.location.hash 来监听路由变化。
- 优点：兼容性好，支持老版本浏览器。
- 缺点： URL 中会出现 #，有时可能不太美观。
History 模式：
- 使用 HTML5 History API 来实现，不带 #，例如 http://example.com/path。
- 需要特定的服务器配置来支持这种模式。
- 优点;URL 更加干净美观，符合传统 URL 结构。
- 缺点：需要后端服务器支持，并且在不正确配置的情况下可能会导致404错误。

在创建 Vue Router 实例时通过 mode 选项来指定使用的路由模式：

const router = new VueRouter({//如果没有显式指定 mode，那么默认将使用 Hash 模式mode: 'history', // 使用 History 模式routes: [// ... 路由配置]
})

需要注意的是，如果使用 History 模式，还需要在服务器端进行相应的配置，以确保在直接访问页面时能正确地返回对应的内容，而不是得到 404 错误。
- 在使用 History 模式时，可以使用 base 选项来指定基础URL，这样在路由跳转时会自动拼接到URL前面
```
const router = new VueRouter({mode: 'history',base: '/myapp/', // 在此处指定基础 URLroutes: [// ... 路由配置]
})
```
总的来说，Hash 模式通常更容易配置和使用，而 History 模式提供了更美观的 URL 结构。

声明式导航

vue-router

vue-router 提供了一个全局组件 router-link (取代 a 标签)
- 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签，to 无需 #
- 能高亮，默认就会提供高亮类名，可以直接设置高亮样式
通过router-link自带的两个样式进行高亮
- 使用router-link跳转后，当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active

router-link-active 和 router-link-exact-active

router-link-active 和 router-link-exact-active 是两个用于处理导航链接样式的特殊类名。这些类名用于控制当导航链接与当前路由匹配时，所应用的CSS类。
1. router-link-active: 模糊标识当前活动（即匹配了当前路由）的导航链接的。
```
<router-link to="/home" class="nav-link" active-class="router-link-active">Home</router-link>
```
1. router-link-exact-active: 标识当前精确匹配的导航链接的。与router-link-active不同，router-link-exact-active只有在链接与当前路由完全匹配时才会被添加。
```
<router-link to="/" class="nav-link" exact active-class="router-link-exact-active">Home</router-link>
```

定制router-link-active 和 router-link-exact-active

在这里插入图片描述

跳转传参

跳转传参有两种方式，在跳转的时候把所需要的参数传到其他页面中
1. 查询参数传参
```
<router-link to="/path?参数名=值"></router-link>
```
- 对应页面组件接受参数
```
$router.query.参数名
```
1. 动态路由传参
- /search/:words 表示，必须要传参数，否则，会导致路由错误。如果不传参数，也希望匹配，可以加个可选符"？"
```
	const router = new VueRouter({routes: [...,{ path: '/search/:words', component: Search }]
})
```
- 对应页面组件接受参数
```
$route.params.参数名
```

查询参数查询栗子

    <div class="hot-link">热门搜索：<router-link to="/search?key=手机">手机</router-link><router-link to="/search?key=电脑">电脑</router-link></div>

<p>搜索关键字: {{ $route.query.key }} </p>

动态路由（可选符）传参栗子

import Home from '@/views/Home'
import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter({routes: [{ path: '/home', component: Home },{ path: '/search/:words？', component: Search }]
})
export default router

    <div class="hot-link">热门搜索：<router-link to="/search/手机">手机</router-link><router-link to="/search/电脑">电脑</router-link></div>

<p>搜索关键字: {{ $route.params.words }} </p>

两种跳转传参总结

方式	适用场景	优点	示例
查询参数传参	传递多个参数时较为方便	灵活，可以传递多个参数	1. to=“/path?key=value&param2=value”
		易于构建和理解URL	2. $route.query.key
		不限于特定路由配置	3. 适用于非动态路由情况
动态路由传参	传递单个参数时优雅简洁	清晰明了，路由中直接体现参数	1. 配置：path: “/path/:param”
		易于维护和理解路由结构	2. to=“/path/value”
		利于定义必要参数的路由	3. $route.params.param
		更有助于RESTful路由设计	4. 适用于资源标识和特定路由参数的传递

查询参数传参在需要传递多个参数或者不依赖路由结构时更为灵活。
动态路由传参在需要传递单个参数、维护清晰的路由结构以及实现RESTful路由设计时更为优雅和适用。

编程式导航

两种语法

编程式导航：用JS代码来进行跳转
两种语法：
1. path 路径跳转（简易方便）
2. name 命名路由跳转 (适合 path 路径长的场景)

path路径跳转语法

特点：简易方便

//简单写法
this.$router.push('路由路径')//完整写法
this.$router.push({path: '路由路径'
})

栗子

<script>
export default {name: 'FindMusic',methods: {goSearch () {// 1. 通过路径的方式跳转this.$router.push('路由路径') [简写]this.$router.push('/search')this.$router.push({     [完整写法]path: '路由路径' })this.$router.push({path: '/search'})}}
}
</script>

name命名路由跳转
- 特点：适合 path 路径长的场景
  语法：

路由规则，必须配置name配置项

{ name: '路由名', path: '/path/xxx', component: XXX },

通过name来进行跳转

this.$router.push({name: '路由名'
})

栗子

router/index.js配置

import Search from '@/views/Search'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({// 注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则mode: 'history',routes: [{ name: 'search', path: '/search/:words?', component: Search },]
})
export default router

views/home.vue文件部分内容

<script>
export default {name: 'FindMusic',methods: {goSearch () {// 1. 通过路径的方式跳转// (1) this.$router.push('路由路径') [简写]// this.$router.push('/search')// (2) this.$router.push({     [完整写法]//         path: '路由路径' //     })// this.$router.push({//   path: '/search'// })this.$router.push({name: 'search'})}}
}
</script>

路由传参

path路径跳转传参

两种传参方式
1. 查询参数
2. 动态路由传参

path路径跳转传参（query传参）

//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}
})

接受参数的方式依然是：$route.query.参数名
注意： path不能配合params使用

path路径跳转传参（动态路由传参）

//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({path: '/路径/参数值'
})

接受参数的方式依然是：$route.params.参数值

name命名路由传参

name 命名路由跳转传参 (query传参)

this.$router.push({name: '路由名字',query: {参数名1: '参数值1',参数名2: '参数值2'}
})

name 命名路由跳转传参 (动态路由传参)

this.$router.push({name: '路由名字',params: {参数名: '参数值',}
})

缓存组件

keep-alive初识

在Vue.js中，可以通过使用keep-alive组件来缓存其他组件的实例，以提高应用性能。
keep-alive是Vue内置的组件，可以用来缓存已渲染的组件，以便在切换路由或组件时，不需要重新创建和销毁组件实例.
keep-alive 是一个抽象组件：它自身不会渲染成一个 DOM 元素，也不会出现在父组件中。
优点：
- 在组件切换过程中把切换出去的组件保留在内存中，防止重复渲染DOM，
- 减少加载时间及性能消耗，提高用户体验性。
keep-alive缓存组件操作步骤：

首先，导入Vue和Vue Router：

   import Vue from 'vue';import VueRouter from 'vue-router';Vue.use(VueRouter);

创建一个Vue Router实例，并定义你的路由：

   const router = new VueRouter({routes: [{ path: '/', component: Home },{ path: '/about', component: About },// 其他路由],});

在Vue组件中，使用keep-alive来包裹需要缓存的组件：

<template><div class="h5-wrapper"><keep-alive :include="['LayoutPage']"><router-view></router-view></keep-alive></div>
</template>

keep-alive的三个属性
① include ：组件名数组，只有匹配的组件会被缓存
② exclude ：组件名数组，任何匹配的组件都不会被缓存
③ max ：最多可以缓存多少组件实例

额外的两个生命周期钩子

keep-alive的使用会触发两个生命周期函数

activated 当组件被激活（使用）的时候触发 → 进入这个页面的时候触发
deactivated 当组件不被使用的时候触发 → 离开这个页面的时候触发
组件缓存后就不会执行组件的created, mounted, destroyed 等钩子，所以其提供了actived 和deactived钩子，帮我们实现业务需求。
栗子

<script>
export default {// 组件名(如果没有配置 name，才会找文件名作为组件名)name: 'LayoutPage',// 组件缓存了，就不会执行组件的created，mounted，destroyed等钩子// 所以提供了 actived 和 deactivedcreated () {console.log('created 组件被加载了');},mounted () {console.log('mounted dom渲染完了');},destroyed () {console.log('destroyed 组件被销毁了');},activated () {alert('你好，欢迎回到首页')console.log('activated 组件被激活了，看到页面了');},deactivated () {console.log('deactivated 组件失活，离开页面了');}
}
</script>