路由
什么是路由（Vue-Router）
单页面，只有一个页面的情况下，所有切换都在一个页面中完成（只有一个html）
多页面，每一个URL地址对应一个全新的页面，点击进行刷新，转跳到新的页面（有多个html组成）
优点和缺点
传统的多页面应用程序，每次请求服务器返回的都是一个完整的页面
新版的单页面应用程序，只有第一次回加载完整的页面，以后每次请求仅仅获取必要的数据，减少请求体积，加快页面的响应速度，降低了对服务器的压力
缺点：开发成本高（需要学习路由），不利用SEO搜索引擎优化（因为单页面html中什么都没有，使用js进行渲染的，百度爬虫爬取不到html中的内容），
谷歌浏览器在解决这个问题，ssr：服务器渲染（渲染以后html中就是有内容的）
路由的介绍
路由就是浏览器的URL中的哈希值与展示视图内容（组件）之间的对应规则（每个URL后边的哈希值对应一个页面，就叫做路由）
当URL中的哈希值发生变化的时候，路由会根据指定的规则来对应视图的内容（组件）展示
简单来说就是，一个页面控制URL后边的哈希值，展示出相对应的组件，这就叫做路由
为什么学习路由
渐进式 => vue => vuer-routr （管理组件之间的转跳）
在web App中，经常会出现通过一个页面来展示和管理整个应用的功能
SPA往往是功能复杂的应用，为了有效管理所有的视图内容，前端路由应运而生
Vue中的路由：由hash和component的对应关系，一个哈希值对应一个组件
简单来说，因为一个页面要切换不同的内容，而且不用重新刷新页面
如何使用路由
首先下载（路由）Vue的第三方包，npm add vue-router@3.5.3
1，在main.js中配置vue Router
2，在mian.js中使用vue.use进行注册
3，开始配置vue Router的映射表关系，提供一个配置想，URL和组件之间的关系（当我们new一个Vue的时候，就会给URL配置一个哈希链接）
new Vue是vue的主入口
4，把配置好的Router注入到Vue里面
5，配置好以后，页面的URL会出现一个#号
我们使用npm下载好路由之后，首先我们在mian.js中配置路由
import Vue from 'vue' import App from './02-路由' Vue.config.productionTip = false //1，首先引入VueRouter import VueRouter from "vue-router"; //2,使用Vue.use(vueRouter)对vueRouter进行注册 Vue.use(VueRouter) // 3,配置vueRouter映射表的关系 const router = new VueRouter({}) new Vue({ //配置好router以后，注入到newVue(入口文件)中 router, render: h => h(App), }).$mount('#app')
在我们展示的页面中创建文件
<template>
<div>
<div class="footer_wrap">
<!-- #号后边是哈希链接，哈希链接不会刷新页面（转跳页面），然后js会检测到URL的变化，然后进行单页面组件的变化-->
<!-- 这里我们是给每个a链接添加了转跳链接-->
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/part">朋友</a>
</div>
<div class="top">
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.footer_wrap {
position: fixed;
left: 0;
top: 0;
display: flex;
width: 100%;
text-align: center;
background-color: #333;
color: #ccc;
}
.footer_wrap a {
flex: 1;
text-decoration: none;
padding: 20px 0;
line-height: 20px;
background-color: #333;
color: #ccc;
border: 1px solid black;
}
.footer_wrap a:hover {
background-color: #555;
}
.top {
padding-top: 62px;
}
</style>
创建URL映射转跳的文件，文件放在src下边的views文件夹下面，默认是没有的需要我们创建
现在去main中配置映射表关系：
1，引入路由对应的组件
2，通过routes配置路由规则
3，到我们的主页面使用router-view指定路由的出口，当路由被命中的时候，对应的组件展示的位置
我们在mian中引入对应的组件，然后配置路由的规则
import Vue from 'vue' import App from './02-路由' //(1)引入路由对应的组件 import Find from "@/views/Find"; import My from "@/views/My"; import Firend from "@/views/Firend"; //1，首先引入VueRouter import VueRouter from "vue-router"; //2,使用Vue.use(vueRouter)对vueRouter进行注册 Vue.use(VueRouter) // 3,配置vueRouter映射表的关系 const router = new VueRouter({ //(2)我们通过routes配置路由规则，只能写成routes routes : [ { path : "/find", //我们指定的URL链接（当URl链接发生变化的时候，不会刷新页面，只会展示我们指定的组件） component : Find //我们指定的URL链接展示的组件 }, { path : "/My", component : My }, { path : "/part", component : Firend } ] }) Vue.config.productionTip = false new Vue({ //配置好router以后，注入到newVue(入口文件)中 router, render: h => h(App), }).$mount('#app')
在页面中展示出对应的组件
<template>
<div>
<div class="footer_wrap">
<!-- #号后边是哈希链接，哈希链接不会刷新页面（转跳页面），然后js会检测到URL的变化，然后进行单页面组件的变化-->
<!-- 这里我们是给每个a链接添加了转跳链接-->
<a href="#/find">发现音乐</a>
<a href="#/my">我的音乐</a>
<a href="#/part">朋友</a>
</div>
<div class="top">
<!-- (3)我们使用router-view指定一个路由出口,告诉路由被命中的时候展示对应的组件-->
<router-view></router-view>
</div>
</div>
</template>
<script>
export default {};
</script>
<style scoped>
.footer_wrap {
position: fixed;
left: 0;
top: 0;
display: flex;
width: 100%;
text-align: center;
background-color: #333;
color: #ccc;
}
.footer_wrap a {
flex: 1;
text-decoration: none;
padding: 20px 0;
line-height: 20px;
background-color: #333;
color: #ccc;
border: 1px solid black;
}
.footer_wrap a:hover {
background-color: #555;
}
.top {
padding-top: 62px;
}
</style>
把路由封装成一个js文件，放在别的文件中，只用在mian中进行注入
首先我们要创建一个Router的文件，然后创建一个默认的index文件，因为路由默认引入的文件是index文件
步骤和之前创建路由的差不多
1，引入vueRouter
2，注册vueRouter，记得引入vue文件。2.1引入vue组件
3，配置路由规则，配置规则的时候，记得引入URL对应的组件。3.1引入组件
4，配置好规则和以后使用（export default）进行导出，需要到主入口，注入到new Vue中，所以需要进行导出
5，在main中封装好的router，进行注入，记得引入router文件。5.1引入router文件
在src文件夹中的index.js中封装vue组件
//封装路由组件 //【2.1】注册vueRouter的时候需要引入Vue import Vue from "vue"; //【3.1】配置路由的时候记得引入相应的规则 import Find from "@/views/Find"; import My from "@/views/My"; import Firend from "@/views/Firend"; //【1】引入vueRouter import VueRouter from "vue-router"; //【2】注册vueRouter，注册的时候需要引入vue Vue.use(VueRouter) //【3】配置路由规则，配置路由规则的时候记得引入对应的组件 const router = new VueRouter({ routes : [ {path : "/find", component : Find}, {path : "/My", component : My}, {path : "/part",component : Firend} ] }) //【4】配置好的规则，使用(export default)进行导出【因为主入口里面需要注入到new Vue，所以需要导出】 export default router //【5】封装路由组件以后，使用import对路由进行导入，然后在newVue中注入
在main中引入组件，然后在new Vue中进行注入router
import Vue from 'vue' import App from './02-路由' //【5.1】导入router文件（一个项目中只能有一个路由，如果有多个路由，在引入这里进行却换，但是只有一个） import router from "@/router"; Vue.config.productionTip = false new Vue({ //【5】封装好路由组件以后，使用这个对封装的router进行注入 router, render: h => h(App), }).$mount('#app')
把a链接替换成router-link标签，router-link就相当于一个a链接，里边的to是相当于转跳的意思，tag可以把a标签转换为其他类型标签
<div class="footer_wrap">
<!-- #号后边是哈希链接，哈希链接不会刷新页面（转跳页面），然后js会检测到URL的变化，然后进行单页面组件的变化-->
<!-- 这里我们是给每个a链接添加了转跳链接-->
<!-- <a href="#/find">发现音乐</a>-->
<!-- <a href="#/my">我的音乐</a>-->
<!-- <a href="#/part">朋友</a>-->
<!-- 使用router-link组件替换掉a链接，然后使用to声明转跳的链接-->
<!-- router-link会默认的把内部组件设置成a链接（可以理解它就是一个a链接）-->
<!-- tag=""可以把默认的a链接转换成其他标签，但是其他标签还是会注册一个a链接-->
<router-link to="/find" tag="div">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/part">朋友</router-link>
</div>
模糊匹配和精确匹配
需求，我们点击的时候，实现点击的按钮高亮效果
在css样式中添加一个class标签，router-link-active（模糊标签）
在style样式中添加（为什么添加状态提升，因为之前a标签有自己的背景颜色，所以我们要使用状态提升）
.router-link-active { background-color: red!important; }
在css样式中添加一个class标签，router-link-exact-active（精确匹配）
.router-link-exact-active { background-color: red!important; }
精确匹配和模糊匹配的区别
都使用了URL路径的匹配，匹配的时候会读取路径。
模糊匹配的时候，会读取路径，在读取路径的过程中，如果说路径上的哈希值包含别的URL路径和哈希值，其他的URL也会被添加高亮样式
精确匹配，是URL全等的情况下进行高亮样式的添加（但是精准匹配的时候，样式上也会添加模糊匹配的样式）
路由传参
在子组件中使用$route.query.参数名，进行父组件的传值接收。在父组件中使用?参数名=我们要传的参数，进行传值。我们放在to里边的哈希值后边
父组件使用？参数名=我们要传递的参数
<router-link to="/find?name=时不我待">发现音乐</router-link>
<router-link to="/my">我的音乐</router-link>
<router-link to="/part">朋友</router-link>
子组件使用$route.query.参数名进行参数接收
<template> <div> 音乐之声 {{$route.query.name}} </div> </template> <script> export default { name: "Find", mounted() { console.log(this.$route) } } </script>
路由的传值，是同url后边的链接进行传递参数的，然后使用子组件进行接收
浙公网安备 33010602011771号