路由进阶

文章目录

    • 1.路由的封装抽离
    • 2.声明式导航 - 导航链接
    • 3.声明式导航-两个类名
        • 自定义匹配的类名
    • 4.声明式导航 - 跳转传参
        • 查询参数传参
        • 动态路传参
        • 两种传参方式的区别
        • 动态路由参数可选符
    • 5.Vue路由 - 重定向
    • 6.Vue路由 - 404
    • 7.Vue路由 - 模式设置
    • 8.编程式导航 - 两种路由跳转
    • 9.编程式导航 - 路由传参

在这里插入图片描述

1.路由的封装抽离

问题：所有的路由配置都堆在main.js中合适吗？
目标：将路由模块抽离出来。好处：拆分模块，利于维护
之前所添加的路由配置都是写在main.js中的
在这里插入图片描述
方法：src下面新建一个文件router，里面建一个index.js，在里面导入router

index.js
//一直换路径很麻烦，可以用@/view.Find(@就是src，就直接从src下面找，是绝对路径)
import Find from '../views/Find'
import My from '../views/My'
import Friend from '../views/Friend'import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) //VueRouter插件初始化//创建了一个路由对象
const router = new VueRouter({//routes 路由规则们routes:[{path:'/find',component:Find},{path:'/my',component:My},{path:'/friend',component:Friend}]})export default routermain.js
import Vue from 'vue'
import App from './App.vue'
import router from './router/index'
Vue.config.productionTip = falsenew Vue({render: h => h(App),router:router
}).$mount('#app')

2.声明式导航 - 导航链接

需求：实现导航高亮效果
vue-router 提供了一个全局组件router-link（取代a标签）
功能：
①能跳转，配置to属性指定路径（必须）。标签还是a标签，to无需#
②能高亮，默认就会提供高亮类名，可以直接设置高亮样式（就是在控制台中，直接找到对应的类名，两个类名，选一个就可以了）
在这里插入图片描述

在这里插入图片描述

App.vue
<template><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>
</template><script>
export default {};
</script><style>.footer_wrap a.router-link-active{background-color: pink;
}</style>

在这里插入图片描述

3.声明式导航-两个类名

说明：router-link自动给当前导航添加了两个高亮类名
在这里插入图片描述
①router-link=active 模糊匹配（用的多）
to="/my" 可以匹配 /my /my/a /my/b
在这里插入图片描述

②router-link-exact-active 精确匹配
to="/my" 仅可以匹配 /my

自定义匹配的类名

Q：router-link的两个高亮类名太长了，希望能定制怎么办
只需要在router配置项中配两个配置项就可以了
在这里插入图片描述
在这里插入图片描述

4.声明式导航 - 跳转传参

目标：在跳转路由时，进行传值

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

①语法格式如下：
to = "/path?参数名 = 值"
②对应页面组件接收传递过来的值
$route.query.参数名
👇👇

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

Search.vue
<template><div class="search"><!-- 从地址栏导入关键字 --><p>搜索关键字: {{ $route.query.key }} </p><p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {// 在created中，获取路由参数// this.$route.query.参数名 获取console.log(this.$route.query.key);}
}
</script>

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="/search?key=黑马程序员">黑马程序员</router-link><router-link to="/search?key=前端培训">前端培训</router-link><router-link to="/search?key=如何成为前端大牛">如何成为前端大牛</router-link></div></div>
</template><script>
export default {name: 'FindMusic'
}
</script>

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>
动态路传参

①配置动态路由
在这里插入图片描述
②配置导航链接
to = "/path/参数值"
③对应页面组件接收传递过来的值
$route.params.参数名

index.js
const router = new VueRouter({routes: [{ path: '/home', component: Home },//路由规则{ path: '/search/:words', component: Search }//   /~/:参数名（参数名可以随便取）]
})

Home.vue<div class="hot-link">热门搜索：<!-- 比查询参数传参的方法简洁 --><router-link to="/search/黑马程序员">黑马程序员</router-link><router-link to="/search/前端培训">前端培训</router-link><router-link to="/search/如何成为前端大牛">如何成为前端大牛</router-link></div>\

Search.vue
<template><div class="search"><p>搜索关键字: {{ $route.params.words }} </p><p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {// 在created中，获取路由参数// this.$route.query.参数名 获取查询参数// this.$route.params.参数名 获取动态路由参数console.log(this.$route.params.words);}
}
</script>
两种传参方式的区别
  1. 查询参数传参（比较适合传多个参数）
    ①跳转：to="/path?参数名=值&参数名2=值"
    ②获取：$routr.query.参数名
  2. 动态路由传参（优雅简洁，传单个参数比较方便）
    ①配置动态路由：path:"/path/参数名"
    ②跳转：to="path/参数值"
    ③获取：$route.params.参数名
动态路由参数可选符

问题：配了路由 path:“/search/:words” 为什么按下面步骤操作，回未匹配到组件，显示空白
原因：/search/:words 表示，必须要传参数。如果不传参数，也希望匹配，可以加个可选符?
在这里插入图片描述

5.Vue路由 - 重定向

问题：网页打开，url默认是 / 路径，未匹配到组件时，会出现空白
说明：重定向 → 匹配path后，强制跳转path路径
语法：{path:匹配路径，redirect:重定向到的路径}（redirect就是强制跳转到的路径）
在这里插入图片描述

index.js
// 创建了一个路由对象
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/search/:words?', component: Search }]
})

6.Vue路由 - 404

作用：当路径找不到匹配时，给个提示页面(比如连接后面加了别的东西，就是不存在的链接)
位置：配在路由最后
语法：path:"*"(任意路径) - 前面不匹配就命中最后这个（*的意思是匹配所有的规则）
在这里插入图片描述
在这里插入图片描述

index.js
import NotFound from '@/views/NotFound'
// 创建了一个路由对象
const router = new VueRouter({routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ path: '/search/:words?', component: Search }{ path: '*', component:NotFound}]
})

然后在views中新建一个NotFound.vue

<template><div><h1>404 Not Found</h1></div>
</template>

7.Vue路由 - 模式设置

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

  • hash路由（默认） 例如：http://localhost:8080/#/home
  • history路由(常用) 例如:http://localhost:8080/home(以后上线需要服务器端支持)
    从默认模式切换到常用模式，只要加mode:"history"就可以了
    在这里插入图片描述
    不带井号了
    在这里插入图片描述
const router = new VueRouter({// 注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则mode: 'history',routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ name: 'search', path: '/search/:words?', component: Search },{ path: '*', component: NotFound }]
})

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

①path路径跳转（简易方便）
在这里插入图片描述

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'})})}}
}
</script>

name命名路由跳转（适合 path 路径长的场景）

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
要先像上面圈出来的这里起名字，然后下面的路由名与上面index.js中的对应，才能起作用

Home.vue
<script>
export default {name: 'FindMusic',methods: {goSearch () {// 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径//    this.$router.push({//        name: '路由名'//    })this.$router.push({name: 'search'})}}
}
</script>

9.编程式导航 - 路由传参

在这里插入图片描述
问题：点击搜索按钮，跳转需要传参如何实现？
两种传参方式：查询参数 + 动态路由传参
两种跳转方式，对于两种传参方式都支持：

  1. path路径跳转传参
    (query传参)
    在这里插入图片描述
    （动态路由传参）
    在这里插入图片描述
index.js
import Home from '@/views/Home'
import Search from '@/views/Search'
import NotFound from '@/views/NotFound'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // VueRouter插件初始化// 创建了一个路由对象
const router = new VueRouter({// 注意：一旦采用了 history 模式，地址栏就没有 #，需要后台配置访问规则mode: 'history',routes: [{ path: '/', redirect: '/home' },{ path: '/home', component: Home },{ name: 'search', path: '/search/:words?', component: Search },{ path: '*', component: NotFound }]
})export default router

Home.vue
<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}`)   //跟data做双向绑定// 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}`// })}}
}
</script>
Search.vue//通过搜索页接收
<template><div class="search"><p>搜索关键字: {{ $route.params.words }} </p><p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template><script>
export default {name: 'MyFriend',created () {// 在created中，获取路由参数// this.$route.query.参数名 获取查询参数// this.$route.params.参数名 获取动态路由参数// console.log(this.$route.params.words);}
}</script>
  1. name命名路由跳转传参（动态路由传参）
    在这里插入图片描述
Home.vue
<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 () {// 2. 通过命名路由的方式跳转 (需要给路由起名字) 适合长路径//    this.$router.push({//        name: '路由名'//        query: { 参数名: 参数值 },//query传参//        params: { 参数名: 参数值 }//动态传参//    })this.$router.push({name: 'search',// query: {//   key: this.inpValue// }params: {words: this.inpValue}})}}
}
</script>
Search.vue//通过搜索页接收
<template><div class="search"><p>搜索关键字: {{ $route.params.words }} </p>//通过params.words接收<p>搜索结果: </p><ul><li>.............</li><li>.............</li><li>.............</li><li>.............</li></ul></div>
</template>

通过什么传参就用什么接收
console
在这里插入图片描述
在这里插入图片描述

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

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

相关文章

Node.js-express

Node.js-express

1.了解Ajax 1.1 什么是ajax Ajax的全称是Asynchronous Javascript And XML&#xff08;异步Js和XML&#xff09;. 通俗的理解&#xff1a;在网页中利用XMLHttpRequest对象和服务器进行数据交互的方式&#xff0c;就是Ajax 1.2 为什么要学习Ajax 之前所学的技术&#xff0c…
阅读更多...
Go语言基础之单元测试

Go语言基础之单元测试

1.go test工具 Go语言中的测试依赖go test命令。编写测试代码和编写普通的Go代码过程是类似的&#xff0c;并不需要学习新的语法、规则或工具。 go test命令是一个按照一定约定和组织的测试代码的驱动程序。在包目录内&#xff0c;所有以_test.go为后缀名的源代码文件都是go …
阅读更多...
Linux部署幻兽帕鲁服务器，PalWorld开服联机教程，保姆级教程

Linux部署幻兽帕鲁服务器，PalWorld开服联机教程，保姆级教程

Linux系统搭建幻兽帕鲁服务器&#xff0c;PalWorld开服联机教程&#xff0c;保姆级教程 最近这游戏挺火&#xff0c;很多人想跟朋友联机&#xff0c;如果有专用服务器&#xff0c;就不需要房主一直开着电脑&#xff0c;稳定性也好得多。 幻兽帕鲁简介 《幻兽帕鲁》是一款游戏…
阅读更多...
快速上手Git

快速上手Git

目录 一、Git概述 二、Git的常用命令 Git全局配置 获取Git仓库 基本概念 本地仓库操作 远程仓库操作 分支操作 标签操作 三、在IDEA中使用Git 在IDEA中配置Git 本地仓库操作 远程仓库操作 分支操作 冲突解决 一、Git概述 Git是一个分布式版本控制工具&…
阅读更多...
Python算法题集_和为K的子数组

Python算法题集_和为K的子数组

本文为Python算法题集之一的代码示例 题目560&#xff1a;和为K的子数组 说明&#xff1a;给你一个整数数组 nums 和一个整数 k &#xff0c;请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1&#xff1a; 输入&#xff1a;nu…
阅读更多...
MOS管驱动电路设计及其中电阻的作用

MOS管驱动电路设计及其中电阻的作用

MOS管驱动电路要求 为了能够充分精确地导通和关断MOS管&#xff0c;设计一种可靠稳定的驱动及保护电路是必要的。一般来说&#xff0c;MOS管的驱动电路需要满足以下要求&#xff1a; ① 开关管的开通过程&#xff0c;驱动电流能够提供较大的充电电流&#xff0c;尽量减少米勒电…
阅读更多...
什么是正向代理？为什么要使用它？

什么是正向代理？为什么要使用它？

在计算机网络中&#xff0c;代理服务器&#xff08;Proxy Server&#xff09;是一种充当客户端和目标服务器之间的中间人的计算机或应用程序。代理服务器可以用于多种目的&#xff0c;其中之一就是正向代理。 正向代理的定义 正向代理是一种代理服务器配置方式&#xff0c;它…
阅读更多...
计网Lesson11 - 虚拟机网络环境及socket概述

计网Lesson11 - 虚拟机网络环境及socket概述

文章目录 虚拟机的简述socket概述 虚拟机的简述 放张图在这&#xff0c;根本没明白是啥对啥&#xff0c;以后学了Linux再来吧 &#x1f626; socket概述 s o c k e t socket socket 是一种用于应用层的用户态与应用层以下的内核态交互的工具&#xff0c;本意为“插座”。 也就是…
阅读更多...
第17节-高质量简历写作求职通关-投递反馈

第17节-高质量简历写作求职通关-投递反馈

&#xff08;点击即可收听&#xff09; 投递跟进和感谢信 如果对一家公司特别心仪&#xff0c;但是投递简历后一直得不到回复怎么办&#xff1f; 面试之后觉得自己没有表现好怎么办&#xff1f; 面试完几天了&#xff0c;依然没有得到回应怎么办&#xff1f; 这个时候你需要写一…
阅读更多...
大模型：合成数据、安全挑战与知识注入

大模型：合成数据、安全挑战与知识注入

在如今这个快速发展的AI时代&#xff0c;大语言模型&#xff08;LLM&#xff09;的研究论文数量呈指数级增长&#xff0c;几乎到了人力无法一一阅读和消化的地步。然而&#xff0c;对这些研究成果的归纳和总结至关重要&#xff0c;因为它们描绘了LLM领域的未来发展轮廓。在近期…
阅读更多...
kubernetes-kubectl命令行管理工具

kubernetes-kubectl命令行管理工具

一、kubectl与kubeconfig的关系 一个常见的报错&#xff1a; 解释&#xff1a; localhost:8080 - 这是一个kube-apiserver的非安全端口&#xff0c;还有一个对外端口是6443&#xff0c;kubectl默认先连接8080&#xff08;二进制默认开始8080&#xff0c;kubeadmin默认关闭8080&…
阅读更多...
STL初识——string的用法

STL初识——string的用法

string 一.string的介绍二.string的使用2.1接口&#xff08;构造类型&#xff09;2.2string的遍历和访问第一种遍历方式第二种遍历方式补充&#xff08;反向迭代器&#xff09;rbeign&#xff0c;rend 2.2接口&#xff08;常用函数&#xff09;2.2.1反转字符串&#xff08;reve…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023