VueRouter

路由介绍

1.思考

单页面应用程序，之所以开发效率高，性能好，用户体验好

最大的原因就是：页面按需更新

比如当点击【发现音乐】和【关注】时，只是更新下面部分内容，对于头部是不更新的

要按需更新，首先就需要明确：访问路径和 组件的对应关系！

访问路径 和 组件的对应关系如何确定呢？ 路由

2.路由的介绍

生活中的路由：设备和ip的映射关系

Vue中的路由：路径和组件的映射关系

3.总结

  • 什么是路由
  • Vue中的路由是什么

路由的基本使用

1.目标

认识插件 VueRouter，掌握 VueRouter 的基本使用步骤

2.作用

修改地址栏路径时，切换显示匹配的组件

3.说明

Vue 官方的一个路由插件，是一个第三方包

4.官网

Vue Router

5.VueRouter的使用（5+2）

固定5个固定的步骤（不用死背，熟能生巧）

  1. 下载 VueRouter 模块到当前工程，版本3.6.5
yarn add vue-router@3.6.5
  1. main.js中引入VueRouter
import VueRouter from 'vue-router'
  1. 安装注册
Vue.use(VueRouter)
  1. 创建路由对象
const router = new VueRouter()
  1. 注入，将路由对象注入到new Vue实例中，建立关联
new Vue({render: h => h(App),router:router
}).$mount('#app')

当我们配置完以上5步之后 就可以看到浏览器地址栏中的路由 变成了 /#/的形式。表示项目的路由已经被Vue-Router管理了

6.代码示例

main.js

// 路由的使用步骤 5 + 2
// 5个基础步骤
// 1. 下载 v3.6.5
// yarn add vue-router@3.6.5
// 2. 引入
// 3. 安装注册 Vue.use(Vue插件)
// 4. 创建路由对象
// 5. 注入到new Vue中，建立关联import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化const router = new VueRouter()new Vue({render: h => h(App),router
}).$mount('#app')

7.两个核心步骤

  1. 创建需要的组件 (views目录)，配置路由规则
  2. 配置导航，配置路由出口(路径匹配的组件显示的位置)
    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>

8.总结

  1. 如何实现 路径改变，对应组件 切换,应该使用哪个插件?
  2. Vue-Router的使用步骤是什么(5+2)?

组件的存放目录问题

注意： .vue文件 本质无区别

1.组件分类

.vue文件分为2类，都是 .vue文件（本质无区别）

  • 页面组件 （配置路由规则时使用的组件）
  • 复用组件（多个组件中都使用到的组件）

2.存放目录

分类开来的目的就是为了 更易维护

  1. src/views文件夹
    页面组件 - 页面展示 - 配合路由用
  2. src/components文件夹
    复用组件 - 展示数据 - 常用于复用

3.总结

  • 组件分类有哪两类？分类的目的？
  • 不同分类的组件应该放在什么文件夹？作用分别是什么？

路由的封装抽离

问题：所有的路由配置都在main.js中合适吗？

目标：将路由模块抽离出来。  好处：拆分模块，利于维护

路径简写：

脚手架环境下 @指代src目录，可以用于快速引入组件

声明式导航-导航链接

1.需求

实现导航高亮效果

如果使用a标签进行跳转的话，需要给当前跳转的导航加样式，同时要移除上一个a标签的样式，太麻烦！！！

2.解决方案

vue-router 提供了一个全局组件 router-link (取代 a 标签)

  • 能跳转，配置 to 属性指定路径(必须) 。本质还是 a 标签 ，to 无需 #
  • 能高亮，默认就会提供高亮类名，可以直接设置高亮样式

语法： 发现音乐

  <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属性添加高亮样式即可实现功能

4.总结

  • router-link是什么？
  • router-link怎么用？
  • router-link的好处是什么？

声明式导航-两个类名

当我们使用跳转时，自动给当前导航加了两个类名

模糊匹配（用的多）

to="/my"  可以匹配 /my    /my/a    /my/b    ....

只要是以/my开头的路径 都可以和 to="/my"匹配到

精确匹配

to="/my" 仅可以匹配  /my

3.在地址栏中输入二级路由查看类名的添加

4.总结

  • router-link 会自动给当前导航添加两个类名，有什么区别呢？

声明式导航-自定义类名（了解）

1.问题

router-link的两个高亮类名 太长了，我们希望能定制怎么办

2.解决方案

我们可以在创建路由对象时，额外配置两个配置项即可。 linkActiveClass和linkExactActiveClass

const router = new VueRouter({routes: [...],linkActiveClass: "类名1",linkExactActiveClass: "类名2"
})

3.代码演示

// 创建了一个路由对象
const router = new VueRouter({routes: [...], linkActiveClass: 'active', // 配置模糊匹配的类名linkExactActiveClass: 'exact-active' // 配置精确匹配的类名
})

4.总结

如何自定义router-link的两个高亮类名

声明式导航-查询参数传参

1.目标

在跳转路由时，进行传参

比如：现在我们在搜索页点击了热门搜索链接，跳转到详情页，需要把点击的内容带到详情页，改怎么办呢？

2.跳转传参

我们可以通过两种方式，在跳转的时候把所需要的参数传到其他页面中

  • 查询参数传参
  • 动态路由传参

3.查询参数传参

  • 如何传参？
  • 如何接受参数
    固定用法：$router.query.参数名

4.代码演示

App.vue

<template><div id="app"><div class="link"><router-link to="/home">首页</router-link><router-link to="/search">搜索页</router-link></div><router-view></router-view></div>
</template><script>
export default {};
</script><style scoped>
.link {height: 50px;line-height: 50px;background-color: #495150;display: flex;margin: -8px -8px 0 -8px;margin-bottom: 50px;
}
.link a {display: block;text-decoration: none;background-color: #ad2a26;width: 100px;text-align: center;margin-right: 5px;color: #fff;border-radius: 5px;
}
</style>

Home.vue

<template><div class="home"><div class="logo-box"></div><div class="search-box"><input type="text"><button>搜索一下</button></div><div class="hot-link">热门搜索：<router-link to="">黑马程序员</router-link><router-link to="">前端培训</router-link><router-link to="">如何成为前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic'
}
</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>

Search.vue

<template><div class="search"><p>搜索关键字: 黑马程序员</p><p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {// 在created中，获取路由参数}
}
</script><style>
.search {width: 400px;height: 240px;padding: 0 20px;margin: 0 auto;border: 2px solid #c4c7ce;border-radius: 5px;
}
</style>

router/index.js

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', component: Search }]
})export default router

main.js

...
import router from './router/index'
...
new Vue({render: h => h(App),router
}).$mount('#app')

五、声明式导航-动态路由传参

1.动态路由传参方式

  • 配置动态路由

动态路由后面的参数可以随便起名，但要有语义

const router = new VueRouter({routes: [...,{ path: '/search/:words', component: Search }]
})

  • 配置导航链接
    to="/path/参数值"
  • 对应页面组件接受参数
    $route.params.参数名

params后面的参数名要和动态路由配置的参数保持一致

2.查询参数传参 VS 动态路由传参

  1. 查询参数传参  (比较适合传多个参数)
    1. 跳转：to="/path?参数名=值&参数名2=值"
    2. 获取：$route.query.参数名
  1. 动态路由传参 (优雅简洁，传单个参数比较方便)
    1. 配置动态路由：path: "/path/:参数名"
    2. 跳转：to="/path/参数值"
    3. 获取：$route.params.参数名

注意：动态路由也可以传多个参数，但一般只传一个

3.总结

声明式导航跳转时, 有几种方式传值给路由页面？

  • 查询参数传参（多个参数）
  • 动态路由传参（一个参数，优雅简洁）

动态路由参数的可选符(了解)

1.问题

配了路由 path:"/search/:words"  为什么按下面步骤操作，会未匹配到组件，显示空白？

2.原因

/search/:words  表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符"？"

const router = new VueRouter({routes: [...{ path: '/search/:words?', component: Search }]
})

Vue路由-重定向

1.问题

网页打开时， url 默认是 / 路径，未匹配到组件时，会出现空白

2.解决方案

重定向 → 匹配 / 后, 强制跳转 /home 路径

3.语法

{ path: 匹配路径, redirect: 重定向到的路径 },比如：{ path:'/' ,redirect:'/home' }

4.代码演示

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

Ve路由-404

1.作用

当路径找不到匹配时，给个提示页面

2.位置

404的路由，虽然配置在任何一个位置都可以，但一般都配置在其他路由规则的最后面

3.语法

path: "*"   (任意路径) – 前面不匹配就命中最后这个

import NotFind from '@/views/NotFind'const router = new VueRouter({routes: [...{ path: '*', component: NotFind } //最后一个]
})

4.代码示例

NotFound.vue

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

router/index.js

...
import NotFound from '@/views/NotFound'
...// 创建了一个路由对象
const router = new VueRouter({routes: [...{ path: '*', component: NotFound }]
})export default router

九、Vue路由-模式设置

1.问题

路由的路径看起来不自然, 有#，能否切成真正路径形式?

  • hash路由(默认)        例如:  http://localhost:8080/#/home
  • history路由(常用)     例如: http://localhost:8080/home   (以后上线需要服务器端支持，开发环境webpack给规避掉了history模式的问题)

2.语法

const router = new VueRouter({mode:'histroy', //默认是hashroutes:[]
})

编程式导航-两种路由跳转方式

1.问题

点击按钮跳转如何实现？

2.方案

编程式导航：用JS代码来进行跳转

3.语法

两种语法：

  • path 路径跳转 （简易方便）
  • name 命名路由跳转 (适合 path 路径长的场景)

4.path路径跳转语法

特点：简易方便

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

5.代码演示 path跳转方式

6.name命名路由跳转

特点：适合 path 路径长的场景

语法：

  • 路由规则，必须配置name配置项
{ name: '路由名', path: '/path/xxx', component: XXX },

  • 通过name来进行跳转
this.$router.push({name: '路由名'
})

7.代码演示通过name命名路由跳转

8.总结

编程式导航有几种跳转方式？

编程式导航-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: {参数名: '参数值',}
})

3.总结

编程式导航，如何跳转传参？

1.path路径跳转

  • query传参
this.$router.push('/路径?参数名1=参数值1&参数2=参数值2')
this.$router.push({path: '/路径',query: {参数名1: '参数值1',参数名2: '参数值2'}
})
  • 动态路由传参
this.$router.push('/路径/参数值')
this.$router.push({path: '/路径/参数值'
})

2.name命名路由跳转

  • query传参
this.$router.push({name: '路由名字',query: {参数名1: '参数值1',参数名2: '参数值2'}
})
  • 动态路由传参 (需要配动态路由)
this.$router.push({name: '路由名字',params: {参数名: '参数值',}
})

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/164833.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Git 基本使用命令

Git 基本使用命令

Git 基本使用命令 下面是一些常用的 Git 基本使用命令&#xff1a; 初始化一个新的 Git 仓库&#xff1a; git init克隆&#xff08;Clone&#xff09;一个远程仓库到本地&#xff1a; git clone <repository_url>添加文件或目录到暂存区&#xff08;Staging Area&am…
阅读更多...
微信小程序前端环境搭建

微信小程序前端环境搭建

搭建微信小程序前端环境 申请小程序测试账号 访问路径 使用微信扫描二维码进行申请&#xff0c;申请成功之后&#xff0c;进入界面&#xff0c;获取小程序ID(AppID)和秘钥(AppSecret) 安装微信web开发者工具 访问路径 选择稳定开发的版本 需要在小程序的设置中将默认关闭…
阅读更多...
geoserver发布tif矢量数据图层

geoserver发布tif矢量数据图层

cesium加载上传至geoserver的tif矢量数据_cesium加载tiff-CSDN博客 geoserver安装及跨域问题解决方案&#xff1a;geoserver安装及跨域问题解决方案_geoserver 跨域_1 1王的博客-CSDN博客 将TIF上传至geoserver 启动geoserver服务&#xff0c;并进入geoserver主页。 1. 新建…
阅读更多...
【物联网产品架构】如何构建物联网产品路线图

【物联网产品架构】如何构建物联网产品路线图

面对现实吧。建立物联网产品路线图难度要比为“正常”技术产品制定路线图要困难得多。 这是因为IoT产品是复杂的系统。为了创建一个工作的解决方案&#xff0c;物联网技术栈的所有层 - 设备硬件&#xff0c;设备软件&#xff0c;通信&#xff0c;云平台和云应用都需要一起工作。…
阅读更多...
Spring Cloud五大组件

Spring Cloud五大组件

Spring Cloud五大组件 Spring Cloud是分布式微服务架构的一站式解决方案&#xff0c;在Spring Boot基础上能够轻松搭建微服务系统的架构。 现有Spring Cloud有两代实现&#xff1a; 一代&#xff1a;Spring Cloud Netflix&#xff0c;主要由&#xff1a;Eureka、Ribbon、Feig…
阅读更多...
【c语言】 逻辑运算符运算规则

【c语言】 逻辑运算符运算规则

1.&&逻辑运算符的坑 int x0&#xff0c;y0&#xff0c;z0; z (x1) && (y2); printf("%d"&#xff0c;y);//y0;今天遇到了同学问的问题&#xff0c;为什么y输出为0. 我第一时间也记不得&#xff0c;工作中一般不会写这种代码&#xff0c;但是却不能…
阅读更多...
Vue3 状态管理 - Pinia

Vue3 状态管理 - Pinia

1. 什么是Pinia Pinia 是 Vue 的专属的最新状态管理库 &#xff0c;是 Vuex 状态管理工具的替代品 提供更加简单的APl&#xff08;去掉了mutation&#xff0c;Pinia 中对state数据的修改可以直接通过action&#xff0c;Vuex中则是通过mutation)提供符合组合式风格的API&#…
阅读更多...
笔记转移：https://www.yuque.com/u32968635/lbk

笔记转移：https://www.yuque.com/u32968635/lbk

语雀&#xff1a;https://www.yuque.com/u32968635/lbk
阅读更多...
视频剪辑技巧：如何高效批量转码MP4视频为MOV格式

视频剪辑技巧：如何高效批量转码MP4视频为MOV格式

在视频剪辑的过程中&#xff0c;经常会遇到将MP4视频转码为MOV格式的情况。这不仅可以更好地编辑视频&#xff0c;还可以提升视频的播放质量和兼容性。对于大量视频文件的转码操作&#xff0c;如何高效地完成批量转码呢&#xff1f;现在一起来看看云炫AI智剪如何智能转码&#…
阅读更多...
Servlte+JSP企业内容管理系统

Servlte+JSP企业内容管理系统

企业内容管理系统的设计与实现 1&#xff0e;系统概述: 随着企事业单位信息化的建设&#xff0c;内联网和外联网之间的信息交互越来越多,优秀的内容管理系统对企业内部来说&#xff0c;能够很好地做到信息的收集和重复利用及信息的增值利用。对于外联网来说,内容管理系统可使…
阅读更多...
6 Go的切片

6 Go的切片

概述 在上一节的内容中&#xff0c;我们介绍了Go的数组&#xff0c;包括&#xff1a;声明数组、初始化数组、访问数组元素等。在本节中&#xff0c;我们将介绍Go的切片。在Go语言中&#xff0c;数组的长度是固定的&#xff0c;不能改变&#xff0c;这在某些场景下使用不太方便。…
阅读更多...
【C++】一文简练总结【多态】及其底层原理＆具体应用（21）

【C++】一文简练总结【多态】及其底层原理＆具体应用（21）

前言 大家好吖&#xff0c;欢迎来到 YY 滴C系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过C的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; 目录 一.多态的概念二.多态的实现1&#xff…
阅读更多...
【C++】：拷贝构造函数与赋值运算符重载的实例应用之日期类的实现

【C++】：拷贝构造函数与赋值运算符重载的实例应用之日期类的实现

C实现日期类 ├─属性&#xff1a; │ ├─年份 │ ├─月份 │ └─日期 ├─方法&#xff1a; │ ├─构造函数 │ ├─拷贝构造函数 │ ├─析构函数 │ ├─设置年份 │ ├─设置月份 │ ├─设置日期 │ ├─获取年份 │ ├─获取月份 │ ├─获取日期 │ ├…
阅读更多...
websocket和mqtt

websocket和mqtt

WebSocket是一种通信协议&#xff0c;它允许在浏览器和服务器之间建立持久连接&#xff0c;并允许双向传递数据。MQTT则是一种轻量级的发布/订阅消息传输协议&#xff0c;常用于物联网(IoT)设备之间的通信。 &#xff08;1&#xff09;js能直接实现mqtt吗&#xff0c;还是需…
阅读更多...
已解决java.lang.IllegalStateException: Duplicate key

已解决java.lang.IllegalStateException: Duplicate key

已解决java.lang.IllegalStateException: Duplicate key 文章目录 报错问题解决思路解决方法交流 报错问题 java.lang.IllegalStateException: Duplicate key 解决思路 java.lang.IllegalStateException: Duplicate key 是由于在使用 Map 或 Set 时&#xff0c;试图将一个已经…
阅读更多...
十、sdl显示yuv图片

十、sdl显示yuv图片

前言 SDL中内置加载BMP的API&#xff0c;使用起来会更加简单&#xff0c;便于初学者学习使用SDL 如果需要加载JPG、PNG等其他格式的图片&#xff0c;可以使用第三方库&#xff1a;SDL_image 测试环境&#xff1a; ffmpeg的4.3.2自行编译版本windows环境qt5.12sdl2.0.22&…
阅读更多...
redis的性能管理和雪崩

redis的性能管理和雪崩

redis的性能管理 redis的数据是缓存在内存当中的 系统巡检&#xff1a; 硬件巡检、数据库、nginx、redis、docker、k8s 运维人员必须要关注的redis指标 在日常巡检中需要经常查看这些指标使用情况 info memory #查看redis使用内存的指标 used_memory:11285512 #数据占用的…
阅读更多...
最简单的简历练习

最简单的简历练习

代码&#xff1a; <!DOCTYPE html> <html> <head> <title>我的简历</title> <style> body { background-image: url(https://picsum.photos/id/1018/1000/1000); background-size: cover; …
阅读更多...
已解决java.lang.RuntimeException: java.io.IOException: invalid constant type: 18异常的正确解决方法，亲测有效！！！

已解决java.lang.RuntimeException: java.io.IOException: invalid constant type: 18异常的正确解决方法，亲测有效！！！

已解决java.lang.RuntimeException: java.io.IOException: invalid constant type: 18异常的正确解决方法&#xff0c;亲测有效&#xff01;&#xff01;&#xff01; 文章目录 报错问题解决方法交流 报错问题 java.lang.RuntimeException: java.io.IOException: invalid cons…
阅读更多...
完美解决ERROR: Command errored out with exit status 1: command: ‘f:\program files\python\python36\pyt

完美解决ERROR: Command errored out with exit status 1: command: ‘f:\program files\python\python36\pyt

完美解决ERROR: Command errored out with exit status 1: command: f:\program files\python\python36\pyt 下滑查看解决方法 文章目录 报错问题解决思路解决方法交流 报错问题 ERROR: Command errored out with exit status 1: command: ‘f:\program files\python\python3…
阅读更多...
最新文章

Copyright @ 2022~2023