上一篇:Vue二)-CSDN博客
目录
[编辑 编辑](#编辑 编辑)
[声明式 / 编程式导航总结](#声明式 / 编程式导航总结)
[1. 基本的导航链接](#1. 基本的导航链接)
[2. 带查询参数的导航](#2. 带查询参数的导航)
[3. 命名路由导航](#3. 命名路由导航)
[4. a标签跳转](#4. a标签跳转)
[1. router.push(location, onComplete?, onAbort?)](#1. router.push(location, onComplete?, onAbort?))
[2. router.replace(location, onComplete?, onAbort?)](#2. router.replace(location, onComplete?, onAbort?))
[3. router.go(n)](#3. router.go(n))
1.自定义指令
![](https://img-blog.csdnimg.cn/direct/184e5a4229f444af99abb4c27306e0cf.png)
![](https://img-blog.csdnimg.cn/direct/485d06505869481d92ef75f763c318db.png)
inserted(最常用的配置,但是不止) 说明:会在指令所在的元素,插入到页面中时触发
- App.vue
html
<template>
<div>
<h1>自定义指令</h1>
<input v-autoFocus type="text">
</div>
</template>
<script>
export default {
// 局部注册指令
directives: {
"autoFocus": {
inserted (el){
el.focus();
}
}
}
}
</script>
<style>
</style>
- main.js
javascript
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
// 全局注册指令
// Vue.directive('autoFocus',{
// "inserted" (el) {
// // console.log(el);
// el.focus();
// }
// })
new Vue({
render: h => h(App),
}).$mount('#app')
v-loading的封装
![](https://img-blog.csdnimg.cn/direct/cbef4250e64d4b928be69f388615eba2.png)
2.插槽
文本插槽
![](https://img-blog.csdnimg.cn/direct/938d77eac4284f138c246aed93e15678.png)
![](https://img-blog.csdnimg.cn/direct/8f5391468bdf4a70bfa3717c2daefbf0.png)
![](https://img-blog.csdnimg.cn/direct/bd788674324349cd8b701741969d2799.png)
![](https://img-blog.csdnimg.cn/direct/f6a2162eaffe4d5fba5f7aab162cf137.png)
文本插槽(有默认值)
![](https://img-blog.csdnimg.cn/direct/f2eda5a5a3244ef1873c2bfcf0d6a053.png)
具名插槽
![](https://img-blog.csdnimg.cn/direct/9e6fc4fcdf9e4feab536560fee35c440.png)
![](https://img-blog.csdnimg.cn/direct/438f5389bca149cf9bcaac02c304126c.png)
也有简写
![](https://img-blog.csdnimg.cn/direct/864a8148485842e29b77527a9159d992.png)
作用域插槽
并不是新类型的插槽,而是给插槽传值的一种语法
![](https://img-blog.csdnimg.cn/direct/f9a5ea2088ca480aac7dec3efe53fb7a.png)
![](https://img-blog.csdnimg.cn/direct/fcffa18702ae48768ea69ac77b72aaf8.png)
详细做一个练习
实现如下效果
将表格封装成一个组件,复用两次,但是修改按钮
![](https://img-blog.csdnimg.cn/direct/5ce9ed26c36e4763bb3f30a7d159c8f5.png)
目录结构
![](https://img-blog.csdnimg.cn/direct/22131219d70e443898352c68355fc206.png)
准备数据
- MyTable.vue
待解决:①封装的表格组件数据是写死的,数据来自父组件,所以需要父传子操作
![](https://img-blog.csdnimg.cn/direct/cf732303325d41528ac41ce75ff5a580.png)
- App.vue
![](https://img-blog.csdnimg.cn/direct/ee5efce8808840059c4c5f9e26799c87.png)
父传子数据
解决表格数据写死的问题
- MyTable.vue
![](https://img-blog.csdnimg.cn/direct/e494e0c7f75d48ca968426fdf1fd9b69.png)
- App.vue
![](https://img-blog.csdnimg.cn/direct/8d2c3e3855e14a04b92730a51b368b28.png)
![](https://img-blog.csdnimg.cn/direct/115496515d664cc4ab0802b5e5da6140.png)
使用文本插槽自定义按钮文本
![](https://img-blog.csdnimg.cn/direct/cce1120b068c4cf186288ea32144fd6a.png)
![](https://img-blog.csdnimg.cn/direct/e9e04308fdef4b688f8e77ed509aa435.png)
![](https://img-blog.csdnimg.cn/direct/b27d18e99d4b4d75936d7803bd007e44.png)
![](https://img-blog.csdnimg.cn/direct/5bc6d4346db445f0ae55355e00a51da5.png)
实现按钮功能--传值(使用了作用域插槽)
![](https://img-blog.csdnimg.cn/direct/14b7c4a12db64329ad123029f83d6a43.png)
![](https://img-blog.csdnimg.cn/direct/2130795f83554decb17d42d35f8d2a26.png)
- 创建一个对象存储item
对象名随便命名
![](https://img-blog.csdnimg.cn/direct/1a1fa6b958d74567b02427f01864dc56.png)
- 拿值
![](https://img-blog.csdnimg.cn/direct/1cab31817215487c84cfe98c49bc70b7.png)
- 实现功能
![](https://img-blog.csdnimg.cn/direct/5dd35b38a0ea4c71a1850440232dbfd1.png)
3.SPA与路由
SPA:单页面应用程序,所有的功能在一个HTML中实现
类比网易云音乐官网和京东官网
![](https://img-blog.csdnimg.cn/direct/83bcb9d046304d158518158cb12324f7.png)
SPA的优势原因
![](https://img-blog.csdnimg.cn/direct/e9284e58f8164c2ab00716d7e6b4022e.png)
路由的介绍
![](https://img-blog.csdnimg.cn/direct/0328d557eebe47e68cc0d658ae995d9a.png)
![](https://img-blog.csdnimg.cn/direct/c81a2a93ea02427abe91db4b2ceaa60c.png)
![](https://img-blog.csdnimg.cn/direct/4598e12e58b54d81b120a25da9b41e24.png)
VueRouter(5+2步操作)
![](https://img-blog.csdnimg.cn/direct/5173764edaad4619b1fb4469d88432dc.png)
固定的5步操作
![](https://img-blog.csdnimg.cn/direct/4e3bab8502a44c049ac90dc8b9d7cc5e.png)
具体操作
下载(完成后重启项目)
npm i vue-router@3.6.5
引包
![](https://img-blog.csdnimg.cn/direct/6a37c371feb74251b9644e3e70ab5c83.png)
注册VueRouter(Vue插件都需要注册)
![](https://img-blog.csdnimg.cn/direct/fbe99a8a582c459aa51515cfd6de22cc.png)
new空的路由对象
![](https://img-blog.csdnimg.cn/direct/5a6eeb348c3a47ba8fcff158764475a4.png)
路由对象注入Vue对象中
![](https://img-blog.csdnimg.cn/direct/b2fdbd0b43b542b6a7f3243b60bfb32c.png)
效果
![](https://img-blog.csdnimg.cn/direct/ec3c3e6052544e45a60b8b46b70a997a.png)
第6步-创建组件,配置路由规则
![](https://img-blog.csdnimg.cn/direct/b72510fa5f5f4133828db37b3ebd7a01.png)
![](https://img-blog.csdnimg.cn/direct/a8868cbfa40e457da140b89f9ff08b36.png)
第7步-配置路由出口
![](https://img-blog.csdnimg.cn/direct/cc2d9e5c8c694f7395281f4978c2470c.png)
详细做一个练习
准备一些组件
![](https://img-blog.csdnimg.cn/direct/3cb0dd0f285e4a52bea999a8ad8a61b7.png)
![](https://img-blog.csdnimg.cn/direct/e39fe926679340f790ab64d8094e8be0.png)
导入组件和编写路由配置
![](https://img-blog.csdnimg.cn/direct/b3b8a00a4d6b47c38f223a83ae4cc4b1.png)
确定路由出口与结构位置
![](https://img-blog.csdnimg.cn/direct/0f62bc2477ad4e78a43515b240c0ad22.png)
效果
![](https://img-blog.csdnimg.cn/direct/9d5d7ced270847299f4dcfca48d8d051.gif)
组件分类(从维护的角度)
为什么使用了路由后,组件从components目录改放到views目录?
![](https://img-blog.csdnimg.cn/direct/6dd7d5accf604400965a745c72d6bf74.png)
本质都是.vue文件,毫无区别,只是程序员需要考虑到维护,所以根据使用场景对其进行分类,分为 页面组件 和 复用组件
路由模块封装(main.js不再写路由)
![](https://img-blog.csdnimg.cn/direct/46a7a28ebf2e426781e14e65aaa9870b.png)
优化上一节的案例,所有在main.js写的路由相关的配置都转移到单独的js文件,只做最后的引入
![](https://img-blog.csdnimg.cn/direct/cab02609503349428a4a5e2ecf3aecd0.png)
![](https://img-blog.csdnimg.cn/direct/2ac5359c169848d38609ab504a1b1ed5.png)
router-link声明式导航
![](https://img-blog.csdnimg.cn/direct/7a829de7951643b09dee5798565ea06f.png)
- 如下图,vue提供的标签,点击哪个就设置一个类名,并且取消其他同类标签的类名 ,只需要给一个类名设置样式就好了(自己写原生太麻烦)
提供的两个类名分别是(选其一)
router-link-exact-active router-link-active
小案例
- 效果
![](https://img-blog.csdnimg.cn/direct/60ba9a779da84b7e84e23c6f983750cf.gif)
- 修改上一次案例
![](https://img-blog.csdnimg.cn/direct/8b5f01d6a4f54a7588af9a1b034706e1.png)
- 加一个类样式
![](https://img-blog.csdnimg.cn/direct/6e24b7f8429543509d8bdabe07ad5b6f.png)
两个类名的区别
exact:adj.精确的
模糊匹配是对于开头能匹配成功就行,精准匹配是完全能匹配成功才行
模糊匹配用的多
![](https://img-blog.csdnimg.cn/direct/541567e953044112939e6bc49f0a5405.png)
- 模糊匹配的使用
下图可以看到,只要是开头路径匹配成功,后面再多,依旧高亮
![](https://img-blog.csdnimg.cn/direct/627bc29f879f402d81648effab99626f.gif)
自定义类名
![](https://img-blog.csdnimg.cn/direct/f28b58c495ac4f1cb8f6c4f4aa1f2e0c.png)
router-link-查询参数传参(更适合多参数)
![](https://img-blog.csdnimg.cn/direct/458076930e7445b1a0138db4da549367.png)
![](https://img-blog.csdnimg.cn/direct/02180a30398b4f7db47c04bd5b00afad.png)
![](https://img-blog.csdnimg.cn/direct/e681ac3c670246e1b487b67d10b9e370.png)
router-link-动态路由传参(更适合多级路由)
设置了/search/:words后,这是模糊匹配,无论是/search/a 还是/search/a/b都一样能传参
![](https://img-blog.csdnimg.cn/direct/1565ed8ceddc40cca7162df0248602c4.png)
![](https://img-blog.csdnimg.cn/direct/e37ca364bd864a04ae0ec417da9254fe.png)
![](https://img-blog.csdnimg.cn/direct/8ae04d9d16cc484fbc109e5a180478eb.png)
![](https://img-blog.csdnimg.cn/direct/db2d004b1dbc4e70964d612c739da555.png)
![](https://img-blog.csdnimg.cn/direct/84c834b8ab4845719ba3ab3c8cf99201.png)
动态路由传参-可选符(通常加上)
路由重定向
![](https://img-blog.csdnimg.cn/direct/c022d3e317234df893a703f544b9d597.png)
匹配到A路径,自动跳转到B路径
![](https://img-blog.csdnimg.cn/direct/5c95b6c9261b4f61a42f0635838550f3.png)
404-页面找不到
path中的*表示,除了已经配置的路径,都能匹配成功
![](https://img-blog.csdnimg.cn/direct/2c4bb76c6c94406a99dad6b2e1d584ed.png)
![](https://img-blog.csdnimg.cn/direct/64ad714445fd465f98d9b782bc168b09.gif)
编程式导航跳转(两种方法)
不用原生js的方法了
①path路径跳转
![](https://img-blog.csdnimg.cn/direct/4f72dbf29c6548a5b2b868bee901ea0b.png)
![](https://img-blog.csdnimg.cn/direct/dcc3a372b20649fdb206c0c0b2356ff9.png)
②name路由名跳转(适合长路径)
不需要写全部的路由路径了,只需要写某个路由名
![](https://img-blog.csdnimg.cn/direct/a0891f7d59a94427930b89108c1fc1cd.png)
![](https://img-blog.csdnimg.cn/direct/9a41353706a84b39aee2e6fa88ffb216.png)
![](https://img-blog.csdnimg.cn/direct/160ce217af4e4008a19a69c691fad590.png)
html
<template>
<div class="home">
<div class="logo-box"></div>
<div class="search-box">
<input v-model="inpValue" type="text">
<button @click="goSearch">搜索一下</button>
</div>
<div class="hot-link">
热门搜索:
<router-link to="/search/黑马程序员">黑马程序员</router-link>
<router-link to="/search/前端培训">前端培训</router-link>
<router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link>
</div>
</div>
</template>
<script>
export default {
name: 'FindMusic',
data () {
return {
inpValue: ''
}
},
methods: {
goSearch () {
// 1. 通过路径的方式跳转
// (1) this.$router.push('路由路径') [简写]
// this.$router.push('路由路径?参数名=参数值')
// this.$router.push('/search')
// this.$router.push(`/search?key=${this.inpValue}`)
// this.$router.push(`/search/${this.inpValue}`)
// (2) this.$router.push({ [完整写法] 更适合传参
// path: '路由路径'
// query: {
// 参数名: 参数值,
// 参数名: 参数值
// }
// })
// this.$router.push({
// path: '/search',
// query: {
// key: this.inpValue
// }
// })
// this.$router.push({
// path: `/search/${this.inpValue}`
// })
// 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径
// this.$router.push({
// name: '路由名'
// query: { 参数名: 参数值 },
// params: { 参数名: 参数值 }
// })
this.$router.push({
name: 'search',
// query: {
// key: this.inpValue
// }
params: {
words: this.inpValue
}
})
}
}
}
</script>
<style>
.logo-box {
height: 150px;
background: url('@/assets/logo.jpeg') no-repeat center;
}
.search-box {
display: flex;
justify-content: center;
}
.search-box input {
width: 400px;
height: 30px;
line-height: 30px;
border: 2px solid #c4c7ce;
border-radius: 4px 0 0 4px;
outline: none;
}
.search-box input:focus {
border: 2px solid #ad2a26;
}
.search-box button {
width: 100px;
height: 36px;
border: none;
background-color: #ad2a26;
color: #fff;
position: relative;
left: -2px;
border-radius: 0 4px 4px 0;
}
.hot-link {
width: 508px;
height: 60px;
line-height: 60px;
margin: 0 auto;
}
.hot-link a {
margin: 0 5px;
}
</style>
编程式导航传参
两种跳转方式都支持两种传参方式,所以一共有四种写法
原理就是创建几个全局对象,点击按钮的时候将数据存入对象,其他组件取用就好
![](https://img-blog.csdnimg.cn/direct/2ea78ceaa2b848ec90847f912025afcb.png)
第一种
![](https://img-blog.csdnimg.cn/direct/efe153e430bb4c37a67d8c460d3b441d.png)
第二种
配置路由
加个参数
![](https://img-blog.csdnimg.cn/direct/3f6e45586f7f45f7bf108f0a5f6ee082.png)
使用
![](https://img-blog.csdnimg.cn/direct/259251f3066549ceafa5bc31b0c1754f.png)
第三种
![](https://img-blog.csdnimg.cn/direct/6c78d8bb29594228bee76f99608b55cd.png)
第四种
![](https://img-blog.csdnimg.cn/direct/806b0e89523d4858a874de1e7664b2e9.png)
声明式 / 编程式导航总结
声明式导航
声明式导航方式在Vue Router中主要通过<router-link>组件来实现,它允许你直接在模板中创建导航链接,而无需编写额外的JavaScript代码。以下是一些常见的声明式导航方式及其示
1. 基本的导航链接
使用<router-link>组件,并通过to属性指定目标路由的路径。
html
<router-link to="/home">Home</router-link>
<router-link to="/about">About</router-link>
2. 带查询参数的导航
你可以通过在to属性中传递一个对象来添加查询参数。
html
<router-link :to="{ path: '/search', query: { q: 'vue' } }">Search Vue</router-link>
3. 命名路由导航
如果你的路由配置中使用了命名路由,你可以通过to属性中的name属性来导航到相应的路由。
html
<router-link :to="{ name: 'user', params: { id: 123 } }">User 123</router-link>
4. a标签跳转
可以直接通过a href跳转
html
<a href="#/Home">首页</a>
编程式导航
编程式导航是Vue Router提供的一种灵活的方式来进行路由导航。这种方式主要通过Vue组件实例或Vue Router实例的方法来实现,而不是在模板中声明导航链接。
1. router.push(location, onComplete?, onAbort?)
push方法用于导航到新的URL,类似于<router-link>的to属性。它可以接收一个路径字符串或是一个描述目标位置的对象。
html
this.$router.push('/home'); // 导航到 /home 路径
// 使用带查询参数的对象
this.$router.push({ path: '/search', query: { q: 'vue' } }); // 导航到 /search?q=vue
// 使用命名路由和参数
this.$router.push({ name: 'user', params: { id: 123 } }); // 导航到命名路由user,并传递id参数
2. router.replace(location, onComplete?, onAbort?)
replace方法用于替换当前路由,它不会向浏览器历史记录中添加新的记录。
html
this.$router.replace('/about'); // 替换当前路由为 /about,但不记录历史
3. router.go(n)
go方法用于在浏览器历史记录中前进或后退指定的步数。
html
this.$router.go(1); // 前进一步,类似于浏览器的前进按钮
this.$router.go(-1); // 后退一步,类似于浏览器的后退按钮
4.233、344
Vue2.x 与 Vue3.x版本对应口诀
使用vue2.x时,对应的路由版本和vuex版本是3版本
5.综合案例-面经基础版
视频教程:082-面经基础版-案例效果分析_哔哩哔哩_bilibili
项目分析
![](https://img-blog.csdnimg.cn/direct/9c84585626764122b7d320429fae25e1.png)
准备空组件
![](https://img-blog.csdnimg.cn/direct/33c1232ebea04ba08af729cc5d357471.png)
路由配置
一级路由配置
![](https://img-blog.csdnimg.cn/direct/b97294e9c54344edbdff48a68313d2dd.png)
- 配置首页的一级路由
![](https://img-blog.csdnimg.cn/direct/a549be4a237d4609b9ef7c798ebf1b60.png)
- 配置面经详情的一级路由
![](https://img-blog.csdnimg.cn/direct/8c2db614b11a4e2ea8f9998051a9567a.png)
- 核心代码截图
![](https://img-blog.csdnimg.cn/direct/7b47908dd5b148a6910e351247352b31.png)
![](https://img-blog.csdnimg.cn/direct/ce97eb13ef1c445c9368bb296d795904.png)
二级路由配置
![](https://img-blog.csdnimg.cn/direct/4f5200292a14446c9630257fc9a2048f.gif)
![](https://img-blog.csdnimg.cn/direct/d5481143489f4f339fe365782972aea8.png)
![](https://img-blog.csdnimg.cn/direct/60179356fa8648f88e91809de83ed55a.png)
首页重定向
进网站首页,自动跳转到文章组件
![](https://img-blog.csdnimg.cn/direct/0cc08c864bd34b8cb647bb5fd2c10fd1.png)
实现功能
导航链接高亮
![](https://img-blog.csdnimg.cn/direct/57d39a53cad04ab7a788c7907228660f.png)
![](https://img-blog.csdnimg.cn/direct/5d9423e2bb4e4d4aa879e505c0b0fb40.png)
![](https://img-blog.csdnimg.cn/direct/1d8f2259dcdd41a3acfd875722711c33.gif)
首页请求渲染
①异步请求数据
![](https://img-blog.csdnimg.cn/direct/38e61d4fe24c49d3903cccef7c9d8de9.png)
![](https://img-blog.csdnimg.cn/direct/be360c1a03214fd3b71373cbe000e226.png)
![](https://img-blog.csdnimg.cn/direct/c4120a06aff54a6ab8ba9dea4927a9df.png)
②存储请求的数据
![](https://img-blog.csdnimg.cn/direct/da89da3488b447eb830dba784c23f982.png)
③动态渲染数据
![](https://img-blog.csdnimg.cn/direct/9113b61eb64749b792ff4626dc4fbb4a.png)
⑤文章详情页-渲染(两种方式传参)
- query查询参数传参
第一步:点击传参
![](https://img-blog.csdnimg.cn/direct/4281134ecf23430894ebbef8fe36a11d.png)
第二步:带上获取的参数请求数据
![](https://img-blog.csdnimg.cn/direct/c44fb7c424ad40129573c4176281063c.png)
请求的数据
![](https://img-blog.csdnimg.cn/direct/c2af4ee762674425bc34d1bc64c1452b.png)
第四步:新建对象存储,渲染
![](https://img-blog.csdnimg.cn/direct/1b39e30563ed43d79fdd190d088dba2d.png)
- 动态路由传参
![](https://img-blog.csdnimg.cn/direct/63a9a80456784be1aefbf9a699896a7b.png)
![](https://img-blog.csdnimg.cn/direct/c6e60f007d8b43f0ac03ac988df3aaf7.png)
![](https://img-blog.csdnimg.cn/direct/47ae37bf58bc45c5a013796afe48c0d7.png)
文章详情-返回上一页
![](https://img-blog.csdnimg.cn/direct/586f5855233d4d69be42c29605dddbc9.png)
![](https://img-blog.csdnimg.cn/direct/745eddcd60ab42c1b2e126d959e73534.gif)
缓存组件-keep-alive
![](https://img-blog.csdnimg.cn/direct/81433fc53c9345b78f89c94f19d19d93.png)
![](https://img-blog.csdnimg.cn/direct/ab42e49378fa4ff293d287a3bfbfce39.png)
keep-alive的三个属性
注意:include和exclude要写组件名数组,必须是数组,元素较多可以写在data中,而且必须是组件名,如果没有设置组件名name,才会去选择组件文件命名
![](https://img-blog.csdnimg.cn/direct/07c2bf84f4844b08ab72c739e5abdade.png)
通常使用include就够了,如果使用exclude,容易影响性能,因为除了指定的组件不缓存,其他都缓存,一定要配合着max使用
![](https://img-blog.csdnimg.cn/direct/cad61f18137248409904c2f39a49f784.png)
![](https://img-blog.csdnimg.cn/direct/a10f883f383f47a48240a42c7135698b.gif)
下一章: