【vue2第十五章】VueRouter 路由配置(VueRouter)与使用 和 router-link与router-view标签使用

单页面应用 与 多页面应用

单页面应用(Single-Page Application,SPA)和多页面应用(Multi-Page Application,MPA)是 Web 应用程序的两种不同架构方式。它们在页面加载和交互方式上有所区别。

单页面应用(SPA):指的是整个应用只有一个 HTML 页面,页面的内容和交互都通过 JavaScript 动态加载和更新。在 SPA 中,页面的切换和内容的变化通过前端路由来实现,通常使用框架(如 Vue、React、Angular)来构建。SPA 的优点是用户体验好,无需刷新整个页面即可根据用户交互动态地更新内容,提供流畅的用户界面。但对于首次加载较大的应用,会消耗较多的初始加载时间。

多页面应用(MPA):指的是应用由多个独立的 HTML 页面组成,每个页面对应一个独立的功能或视图。在 MPA 中,每个页面都是独立的,它们通过链接或表单提交等方式进行页面跳转。在每个页面中,服务器会返回一个新的 HTML 页面,包含所需的样式和脚本。MPA 的优点是每个页面都有独立的 URL,有利于 SEO(搜索引擎优化),也更适合传统的 Web 开发方式。但页面之间的切换会导致整个页面的刷新,用户体验稍差一些。

选择SPA还是MPA主要取决于应用的需求和目标。SPA适合构建交互复杂、用户体验要求高的应用,如社交媒体应用、在线编辑器等;而MPA适合构建内容丰富、独立页面较多的应用,如电子商务网站、新闻门户等。
在这里插入图片描述

常见的网站比如网易云音乐就是单页面应用,而京东,淘宝就是一个多页面应用。

在这里插入图片描述

VueRouter路由

像vue开发的就是一个典型的单页面程序。
Vue Router 是 Vue.js 官方提供的路由管理器。它能够帮助你在 Vue 单页面应用(SPA)中实现页面之间的导航和路由功能。它是一种映射关系,映射了页面组件与路径的关系。

在这里插入图片描述

如何配置VueRouter

  1. 下载vue-router因为它是一个单独的模块所以需要下载。
    vue2对应的vue-router版本是 vue-router3.x
    vue3对应的vue-router版本是 vue-router4.x

    使用npm下载:npm install vue-router@3.6.5 --save
    使用yarn下载:yarn add vue-router@3.6.5

  2. 在main.js中引入。

import VueRouter from 'vue-router'
  1. 安装注册。
Vue.use(VueRouter)
  1. 创建路由对象。
const router = new VueRouter();
  1. 将路由对象注入到Vue实列中,建立关联,键值对形式,键与值同名可简写。
new Vue({render: h => h(App),router
}).$mount('#app')

main.js完整代码:

import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'Vue.config.productionTip = false
Vue.use(VueRouter)const router = new VueRouter();new Vue({render: h => h(App),router
}).$mount('#app')

配置成功启动项目浏览器顶部地址栏会出现#号
在这里插入图片描述

如何使用VueRouter

在这里插入图片描述

首先肯定是要配置路由规则。
首先准备了三个简单的页面组件。
引入页面组件,然后将他添加到router的routes属性中,path是访问路径,component是对应的组件页面{path:"/fine",component:MyFine},页面组件的名称最好超过两个单词,否则会报错,因为是vue规定的,为了有更强大的语义性。name

import Vue from 'vue'
import App from './App.vue'
import MyFine from './views/MyFine.vue'
import MyFriend from './views/MyFriend.vue'
import MyIndex from './views/MyIndex.vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)Vue.config.productionTip = falseconst router = new VueRouter({
//配置路由规则 path是访问路径,component是对应的组件页面routes:[{path:"/fine",component:MyFine},{path:"/friend",component:MyFriend},{path:"/index",component:MyIndex},]
});
new Vue({render: h => h(App),router
}).$mount('#app')

路由的路径跳转,与容器 <router-view></router-view>

<template><div id="app"><div class="menu-box"><ul class="menu"><!-- 路由路径跳转只需要在a标签上写main.js配置规则的path路径 --><li><a href="#/index">首页</a></li><li><a href="#/fine">发现</a></li><li><a href="#/friend">朋友</a></li></ul></div><div ><!-- 这是组件页面的容器,切换菜单只会更新这里面的内容 --><router-view></router-view></div></div>
</template><script>export default {name: 'App',components: {}
}
</script><style>
*{margin: 0;padding: 0;
}
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
.menu-box{width: 100%;height: 50px;
}
.menu{height: 100%;text-align: center;line-height: 50px;
}
.menu>li{float: left;width: 33%;list-style: none;background: skyblue;
}</style>

效果点击上面的menu菜单下面的内容也会随之改变:
在这里插入图片描述

提取路由代码,封装路由模块

像上面这样配置路由会有一点问题,就是不易于维护,因为把所有的配置全部都写在main.js里面,那我们后面维护看见main.js文件里面的一堆代码,头都晕了,所以这里我们将它提取出来,再通过import导入到main,js。

  1. 首先建立路由模块文件
    在这里插入图片描述
  2. 将main.js里面配置路由的代码赋值到index.js。导入文件的路径需要修改,@:代表从src文件出发寻找文件。
import MyFine from '@/views/MyFine.vue'
import MyFriend from '@/views/MyFriend.vue'
import MyIndex from '@/views/MyIndex.vue'
import VueRouter from 'vue-router'
import Vue from 'vue'Vue.use(VueRouter)const router = new VueRouter({routes:[{path:"/fine",component:MyFine},{path:"/friend",component:MyFriend},{path:"/index",component:MyIndex},]});export default router;
  1. 再main.js里面导入路由模块直接使用。
import Vue from 'vue'
import App from './App.vue'
//导入路由模块
import router from './router/index.js'Vue.config.productionTip = falsenew Vue({render: h => h(App),//直接使用router
}).$mount('#app')

使用给menu菜单选中的高亮样式

  1. router-link是什么?
    vue-router提供的全局组件,用于替换 a 标签
  2. router-link怎么用?
<router-link to="/路径值"></router-link>

再使用 <router-link to="/index">首页</router-link>时to属性里面的路径就可以不用加#号了
必须传入to属性,指定路由路径值

  1. router-link好处?
    能跳转,能高亮(自带激活时的类名)router-link-activerouter-link-exact-active我们需要高亮效果可以直接再style样式中为这个类名添加高亮的样式了。

修改刚才的代码为:

<template><div id="app"><div class="menu-box"><ul class="menu"><!-- 路由路径跳转只需要在a标签上写main.js配置规则的path路径 --><router-link to="/index">首页</router-link><router-link to="/fine">发现</router-link><router-link to="/friend">朋友</router-link></ul></div><div ><!-- 这是组件页面的容器,切换菜单只会更新这里面的内容 --><router-view></router-view></div></div>
</template><script>export default {name: 'App',components: {}
}
</script><style>
*{margin: 0;padding: 0;
}
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;
}
.menu-box{width: 100%;height: 50px;
}
.menu{height: 100%;text-align: center;line-height: 50px;
}
.menu>a{float: left;width: 33%;display: block;list-style: none;background: skyblue;
}
//为激活时的这个类名添加高亮属性样式
.menu>a.router-link-active{ background: rgb(12, 155, 211);
}
</style>

效果:
在这里插入图片描述

router-link-activerouter-link-exact-active的意义

在这里插入图片描述
这里可以看见我选中的标签上面时加了两个类的,这两个类的意义是什么呢?
router-link-active :模糊匹配
router-link-exact-active:精确匹配
模糊匹配就是地址栏上面有子目录,也可以匹配上。

而精确匹配就是地址栏和router-link的to属性路径必须时一模一样,才可以匹配上。
在这里插入图片描述

如现在时两个条件都满足,模糊和精确条件都满足,所以选中的menu里面类就是两个:
在这里插入图片描述
如现在就是不满足精确条件了,所以选中的menu里面类就是一个router-link-active
在这里插入图片描述

自定义高亮类名

在这里插入图片描述
在路由模块中修改:

import MyFine from '@/views/MyFine.vue'
import MyFriend from '@/views/MyFriend.vue'
import MyIndex from '@/views/MyIndex.vue'
import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
const router = new VueRouter({routes:[{path:"/fine",component:MyFine},{path:"/friend",component:MyFriend},{path:"/index",component:MyIndex},],//模糊匹配的类名linkActiveClass:"active",//精确匹配的类名linkExactActiveClass:"exact-active"});
export default router;

这样添加的就是自定义的类名了,如图:
在这里插入图片描述

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

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

相关文章

【Hive SQL 每日一题】统计用户连续下单的日期区间

文章目录 测试数据需求说明需求实现 测试数据 create table test(user_id string,order_date string);INSERT INTO test(user_id, order_date) VALUES(101, 2021-09-21),(101, 2021-09-22),(101, 2021-09-23),(101, 2021-09-27),(101, 2021-09-28),(101, 2021-09-29),(101, 20…

Ubutnu允许ssh连接使用root与密码登录

文章目录 1. 修改sshd_config2. 设置root密码3. 重启SSH服务 1. 修改sshd_config 修改/etc/ssh/sshd_config文件&#xff0c;找到 #Authentication&#xff0c;将 PermitRootLogin 参数修改为 yes。如果 PermitRootLogin 参数被注释&#xff0c;请去掉首行的注释符号&#xff…

激光焊接汽车尼龙塑料配件透光率测试仪

激光塑性成型技术是近年来塑性加工界出现的一种新技术。通常塑料主要是通过加热加压依赖模具成型。这对于单品种、大批量生产是有效的&#xff1b;而对于各种不同形状的塑料制件则需要昂贵的模具‚装置也较庞大。 高度聚焦的激光束垂直照射在待变形的板料上‚由于塑料直接吸收激…

【MySQL】事务 详解

事务 详解 一. 为什么使用事务二. 事务的概念三. 使用四. 事务的特性原子性&#xff08;Atomicity&#xff09;一致性&#xff08;Consistency&#xff09;隔离性&#xff08;Isolation&#xff09;持久性&#xff08;Durability&#xff09; 五. 事务并发所带来的问题脏读问题…

MT4移动端应用指南:随时随地进行交易

如今&#xff0c;随着科技的不断发展&#xff0c;我们可以随时随地通过手机进行各种操作&#xff0c;包括进行金融交易。本文将为大家介绍一款优秀的金融交易软件——MT4&#xff08;可在mtw.so/6gwPno这点下&#xff09;移动端应用&#xff0c;并提供详细的使用指南&#xff0…

ubuntu 20.04 设置 authorized_keys 让 VS Code ssh 远程免密连接

相关文章 VSCode SSH 连接远程ubuntu Linux 主机 前言 前面记录了 VS Code 可以通过 SSH 远程连接 ubuntu Linux 主机&#xff0c;比如代码放在远程 ubuntu 主机上&#xff0c; windows 端 VS Code 通过 ssh 远程连接 ubuntu&#xff0c;并打开 远程主机上的 代码 如果不设置…

Linux命令之文件管理

Linux命令之文件管理 创建文件删除文件移动文件拷贝文件查看文件文件统计信息的查看文件内容的查看文件的权限文件权限的介绍和表示文件权限的改变 文件的类型 查找文件 创建文件 创建文件的话&#xff0c;一般使用touch命令 touch file1(文件名字)删除文件 删除文件的话&…

如何将枯燥的大数据进行可视化处理?

在数字时代&#xff0c;大数据已经成为商业、科学、政府和日常生活中不可或缺的一部分。然而&#xff0c;大数据本身往往是枯燥的、难以理解的数字和文字&#xff0c;如果没有有效的方式将其可视化&#xff0c;就会错失其中的宝贵信息。以下是一些方法&#xff0c;可以将枯燥的…

ubuntu server 更改时区:上海

1. 打开终端&#xff0c;在命令行中以超级用户或具有sudo权限的用户身份运行以下命令&#xff1a; sudo dpkg-reconfigure tzdata 这会打开一个对话框&#xff0c;用于选择系统的时区设置。 2. 在对话框中&#xff0c;使用上下箭头键在地区列表中选择"Asia"&#x…

打造基于终端命令行的IDE,Termux配置Vim C++开发环境

Termux配置Vim C开发环境&#xff0c;打造基于终端命令行的IDE 主要利用VimCoc插件&#xff0c;配置C的代码提示等功能。 Termux换源 打开termux&#xff0c;输入termux-change-repo 找到mirrors.tuna.tsinghua.edu.cn&#xff0c;清华源&#xff0c;空格选中&#xff0c;回…

手写Spring:第5章-注入属性和依赖对象

文章目录 一、目标&#xff1a;注入属性和依赖对象二、设计&#xff1a;注入属性和依赖对象三、实现&#xff1a;注入属性和依赖对象3.0 引入依赖3.1 工程结构3.2 注入属性和依赖对象类图3.3 定义属性值和属性集合3.3.1 定义属性值3.3.2 定义属性集合 3.4 Bean定义补全3.5 Bean…

《向量数据库指南》——AI原生向量数据库Milvus Cloud 2.3架构升级

架构升级 GPU 支持 早在 Milvus 1.x 版本,我们就曾经支持过 GPU,但在 2.x 版本中由于切换成了分布式架构,同时出于对于成本方面的考虑,暂时未加入 GPU 支持。在 Milvus 2.0 发布后的一年多时间里,Milvus 社区对 GPU 的呼声越来越高,再加上 NVIDIA 工程师的大力配合——为…