💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。
非常期待和您一起在这个小小的网络世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
前言
本栏目是根据黑马程序员的网课来整理的笔记，也会结合我的一些个人见解，来记录自己学习Vue的过程，俗话说，好记性不如烂笔头，小郑喜欢在学习的过程中记笔记，记下自己在学习过程中难以理解的知识点，反复练习，加深印象，小郑打算在这个暑假的第一个月学习完Vue从0到1实现项目，希望广大网友一起监督学习，互相进步!
目录
路由的基本使用
作用
修改地址栏路径时，切换显示匹配的组件
VueRouter的使用
-
下载 VueRouter 模块到当前工程，版本3.6.5
yarn add vue-router@3.6.5 / npm install vue-router@3.6.5 -
main.js中引入VueRouter
import VueRouter from 'vue-router' -
安装注册
Vue.use(VueRouter) -
创建路由对象
const router = new VueRouter() -
注入，将路由对象注入到new Vue实例中，建立关联
new Vue({ render: h => h(App), router:router }).$mount('#app')
当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了
两个核心步骤
-
创建需要的组件 (views目录)，配置路由规则
配置导航，配置路由出口(路径匹配的组件显示的位置)
App.vue
<div class="footer_wrap">
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/friend">朋友</a>
</div>
<div class="top">
<router-view></router-view>
</div>组件的存放目录问题
注意： .vue文件 本质无区别
1.组件分类
.vue文件分为2类，都是 .vue文件（本质无区别）
-
页面组件 （配置路由规则时使用的组件）
-
复用组件（多个组件中都使用到的组件）
2.存放目录
分类开来的目的就是为了 更易维护
-
src/views文件夹
页面组件 - 页面展示 - 配合路由用
-
src/components文件夹
复用组件 - 展示数据 - 常用于复用
路由的封装抽离
将路由模块抽离出来。 好处：拆分模块，利于维护
路径简写：
脚手架环境下 @指代src目录，可以用于快速引入组件
声明式导航-导航链接
1.需求
实现导航高亮效果
如果使用a标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个a标签的样式，太麻烦！！！
2.解决方案
vue-router 提供了一个全局组件 router-link (取代 a 标签)
-
能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 #
-
能高亮，默认就会提供高亮类名，可以直接设置高亮样式
语法： <router-link to="path的值">发现音乐</router-link>
<div>
<div class="footer_wrap">
<router-link to="/find">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/friend">朋友</router-link>
</div>
<div class="top">
<!-- 路由出口 → 匹配的组件所展示的位置 -->
<router-view></router-view>
</div>
</div>3.通过router-link自带的两个样式进行高亮
使用router-link跳转后，我们发现。当前点击的链接默认加了两个class的值 router-link-exact-active和router-link-active
我们可以给任意一个class属性添加高亮样式即可实现功能
声明式导航-两个类名
1.router-link-active
模糊匹配（用的多）
to="/my" 可以匹配 /my /my/a /my/b ....
只要是以/my开头的路径 都可以和 to="/my"匹配到
2.router-link-exact-active
精确匹配
to="/my" 仅可以匹配 /my
声明式导航-自定义类名（了解）
1.问题
router-link的两个高亮类名 太长了，我们希望能定制怎么办
2.解决方案
我们可以在创建路由对象时，额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass
const router = new VueRouter({
routes: [...],
linkActiveClass: "类名1",
linkExactActiveClass: "类名2"
})
声明式导航-查询参数传参
比如：现在我们在搜索页点击了热门搜索链接，跳转到详情页，需要把点击的内容带到详情页，改怎么办呢？
跳转传参
我们可以通过两种方式，在跳转的时候把所需要的参数传到其他页面中
-
查询参数传参
-
动态路由传参
查询参数传参
-
如何传参？
<router-link to="/path?参数名=值"></router-link>
-
如何接受参数
固定用法：$router.query.参数名
声明式导航-动态路由传参
配置动态路由
动态路由后面的参数可以随便起名，但要有语义
const router = new VueRouter({
routes: [
...,
{
path: '/search/:words', words是参数名
component: Search
}
]
})-
配置导航链接
to="/path/参数值"
-
对应页面组件接受参数
$route.params.参数名
params后面的参数名要和动态路由配置的参数保持一致
查询参数传参 VS 动态路由传参
-
查询参数传参 (比较适合传多个参数)
-
跳转：to="/path?参数名=值&参数名2=值"
-
获取：$route.query.参数名
-
-
动态路由传参 (优雅简洁，传单个参数比较方便)
-
配置动态路由：path: "/path/:参数名"
-
跳转：to="/path/参数值"
-
获取：$route.params.参数名
注意：动态路由也可以传多个参数，但一般只传一个
-
动态路由参数的可选符(了解)
配了路由 path:"/search/:words" 为什么按下面步骤操作，会未匹配到组件，显示空白？
/search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"
const router = new VueRouter({
routes: [
...
{ path: '/search/:words?', component: Search }
]
})Vue路由-重定向
1.问题
网页打开时， url 默认是 / 路径，未匹配到组件时，会出现空白
2.解决方案
重定向 → 匹配 / 后, 强制跳转 /home 路径
3.语法
{ path: 匹配路径, redirect: 重定向到的路径 },
比如：
{ path:'/' ,redirect:'/home' }Vue路由-404
1.作用
当路径找不到匹配时，给个提示页面
2.位置
404的路由，虽然配置在任何一个位置都可以，但一般都配置在其他路由规则的最后面
3.语法
path: "*" (任意路径) – 前面不匹配就命中最后这个
import NotFind from '@/views/NotFind'
const router = new VueRouter({
routes: [
...
{ path: '*', component: NotFind } //最后一个
]
})Vue路由-模式设置
1.问题
路由的路径看起来不自然, 有#，能否切成真正路径形式?
-
hash路由(默认) 例如: http://localhost:8080/#/home
-
history路由(常用) 例如: http://localhost:8080/home (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)
2.语法
const router = new VueRouter({
mode:'histroy', //默认是hash
routes:[]
})编程式导航-两种路由跳转方式
1.问题
点击按钮跳转如何实现？
2.方案
编程式导航：用JS代码来进行跳转
3.语法
两种语法：
-
path 路径跳转 （简易方便）
-
name 命名路由跳转 (适合 path 路径长的场景)
4.path路径跳转语法
特点：简易方便
//简单写法
this.$router.push('路由路径')
//完整写法
this.$router.push({
path: '路由路径'
})5.name命名路由跳转
特点：适合 path 路径长的场景
语法：
-
路由规则，必须配置name配置项
{ name: '路由名', path: '/path/xxx', component: XXX },通过name来进行跳转
this.$router.push({
name: '路由名'
})编程式导航-path路径跳转传参
1.问题
点击搜索按钮，跳转需要把文本框中输入的内容传到下一个页面如何实现？
2.两种传参方式
1.查询参数
2.动态路由传参
3.传参
两种跳转方式，对于两种传参方式都支持：
① path 路径跳转传参
② name 命名路由跳转传参
4.path路径跳转传参（query传参
//简单写法
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
//完整写法
this.$router.push({
path: '/路径',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})接受参数的方式依然是：$route.query.参数名
5.path路径跳转传参（动态路由传参）
//简单写法
this.$router.push('/路径/参数值')
//完整写法
this.$router.push({
path: '/路径/参数值'
})接受参数的方式依然是：$route.params.参数值
注意：path不能配合params使用
编程式导航-name命名路由传参
1.name 命名路由跳转传参 (query传参)
this.$router.push({
name: '路由名字',
query: {
参数名1: '参数值1',
参数名2: '参数值2'
}
})2.name 命名路由跳转传参 (动态路由传参)
this.$router.push({
name: '路由名字',
params: {
参数名: '参数值',
}
})❤️❤️❤️小郑是普通学生水平，如有纰漏，欢迎各位大佬评论批评指正！😄😄😄
💘💘💘如果觉得这篇文对你有帮助的话，也请给个点赞、收藏下吧，非常感谢!👍 👍 👍
扫一扫
504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
