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

news2025/1/16 0:43:34

单页面应用 与 多页面应用

单页面应用（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 = false

const 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 = false

new 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-active 和 router-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-active 和 router-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.coloradmin.cn/o/980795.html

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

相关文章

【工作记录】基于spiderflow+ocr实现图片验证码识别@20230906

【工作记录】基于spiderflow+ocr实现图片验证码识别@20230906

声明: 本文引用的网站仅用于演示&#xff0c;如侵删。 背景 这两天收到运营同事一个关于需要登录的网站的数据爬取需求&#xff0c;登录同时需要填入图片验证码。 经过多次尝试&#xff0c;结合百度OCR可以完成图片验证码的获取和识别&#xff0c;特此记录。 希望能帮助到需要…
阅读更多...
解决readme.md文件中粘贴的图片放到GitHub上无法显示问题

解决readme.md文件中粘贴的图片放到GitHub上无法显示问题

问题原因 GitHub的README.md文件通常无法直接引用本地文件或图片&#xff0c;因为GitHub的README.md是在远程服务器上渲染和显示的&#xff0c;无法访问本地文件系统。 解决方案 要在GitHub的README.md中显示图片&#xff0c;你需要将图片上传到GitHub上&#xff0c;然后使用图…
阅读更多...
多维时序 | MATLAB实现GWO-BiLSTM灰狼算法优化双向长短期记忆神经网络的多变量时间序列预测

多维时序 | MATLAB实现GWO-BiLSTM灰狼算法优化双向长短期记忆神经网络的多变量时间序列预测

多维时序 | MATLAB实现GWO-BiLSTM灰狼算法优化双向长短期记忆神经网络的多变量时间序列预测 目录 多维时序 | MATLAB实现GWO-BiLSTM灰狼算法优化双向长短期记忆神经网络的多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 MATLAB实现CNN-BiGRU-A…
阅读更多...
完成Centos上使用SSH公钥进行免密上传文件到gitee的步骤后，测试免密推送到gitee的时候还是需要输入邮箱和密码

完成Centos上使用SSH公钥进行免密上传文件到gitee的步骤后，测试免密推送到gitee的时候还是需要输入邮箱和密码

如果你已经按照正确的步骤设置了SSH公钥并进行了免密测试&#xff0c;但仍然需要输入邮箱地址和密码才能推送到gitee&#xff0c;那么可能有以下几种原因&#xff1a; 您可能没有使用SSH URL来推送代码。请确保您使用的是SSH URL而不是HTTPS URL来推送代码。您可以使用命令 gi…
阅读更多...
SimVODIS++: Neural Semantic Visual Odometry in Dynamic Environments 论文阅读

SimVODIS++: Neural Semantic Visual Odometry in Dynamic Environments 论文阅读

论文信息 题目&#xff1a;SimVODIS: Neural Semantic Visual Odometry in Dynamic Environments 作者&#xff1a;Ue-Hwan Kim , Se-Ho Kim , and Jong-Hwan Kim , Fellow, IEEE 时间&#xff1a;2022 来源&#xff1a; IEEE ROBOTICS AND AUTOMATION LETTERS&#xff08;RAL…
阅读更多...
⛳ MVCC 原理详解

⛳ MVCC 原理详解

&#x1f38d;目录 ⛳ MVCC 原理详解&#x1f43e; 一、事务回顾&#x1f4d0; 1.1、什么是数据库事务&#xff0c;为什么要有事务&#x1f389; 1.2、事务包括哪几个特性&#xff1f;&#x1f38d; 1.3、事务并发存在的问题1.3.1、脏读1.3.2、不可重复读1.3.3、幻读 &#x1f…
阅读更多...
【Spring Boot】SpringBoot 2.6.6 集成 SpringDoc 1.6.9 生成swagger接口文档

【Spring Boot】SpringBoot 2.6.6 集成 SpringDoc 1.6.9 生成swagger接口文档

文章目录 前言一、SpringDoc是什么&#xff1f;二、使用步骤1.引入库2.配置类3.访问测试 总结其他配置立个Flag 前言 之前常用的SpringFox在2020年停止更新了&#xff0c;新项目集成SpringFox出来一堆问题&#xff0c;所以打算使用更活跃的SpringDoc&#xff0c;这里简单介绍一…
阅读更多...
【双向传输ConvLSTM网络:Pan-Sharpening】

【双向传输ConvLSTM网络:Pan-Sharpening】

D2TNet: A ConvLSTM Network With Dual-Direction Transfer for Pan-Sharpening (D2TNet:用于泛锐化的双向传输ConvLSTM网络) 在本文中&#xff0c;我们提出了一种有效的卷积长短期记忆(ConvLSTM)网络&#xff0c;具有双向传输的泛锐化&#xff0c;称为D2TNet。我们设计了一个…
阅读更多...
【ARM CoreLink 系列 3 -- CCI-550 控制器介绍 】

【ARM CoreLink 系列 3 -- CCI-550 控制器介绍 】

文章目录 CCI FamilyCCI-550 简介CCI-550 功能CCI-550 Interfaces Snoop filter 使用背景CCI-550 Snoop filter 上篇文章&#xff1a;ARM CoreLink 系列 2 – CCI-400 控制器简介 CCI Family CCI-550 简介 Arm CoreLink CCI-550 Cache Coherent Interconnect 扩展了 CoreLink…
阅读更多...
sentinel加密狗使用及规则配置

sentinel加密狗使用及规则配置

Sentinel加密狗是一种硬件加密设备&#xff0c;用于保护软件应用程序免受未经授权的访问和复制。它可以提供软件许可管理、访问控制和数据保护等功能。下面是Sentinel加密狗的使用及规则配置的相关介绍。 Sentinel加密狗的使用 插入加密狗&#xff1a;将Sentinel加密狗插入计算…
阅读更多...
用滑动条做调色板---cv2.getTrackbarPos()，cv2.creatTrackbar()

用滑动条做调色板---cv2.getTrackbarPos()，cv2.creatTrackbar()

滑动轨迹栏作调色板 cv.createTrackbar(‘R’, ‘image’, 0, 255, nothing) 参数&#xff1a;哪个滑动轨迹栏&#xff0c;哪个窗口&#xff0c;最小值&#xff0c;最大值&#xff0c;回调函数 cv.getTrackbarPos(‘R’, ‘image’) 参数&#xff1a;轨迹栏名&#xff0c;窗口…
阅读更多...
IMAU鸿蒙北向开发-2023年9月5日学习日志

IMAU鸿蒙北向开发-2023年9月5日学习日志

1. 5种调试方式 1.1 Previewer 在侧边 Previewer 选项卡内可以预览Entry。 如果要单独预览组件&#xff0c;可以在给组件加Preview 装饰器 1.2 Local Emulator&#xff08;本地模拟&#xff09; 1.3 Remote Emulator&#xff08;远程模拟&#xff09; 使用时需要登录华为开发…
阅读更多...
FSK解调技术的FPGA实现

FSK解调技术的FPGA实现

本原创文章由深圳市小眼睛科技有限公司创作&#xff0c;版权归本公司所有&#xff0c;如需转载&#xff0c;需授权并注明出处 一、FSK信号的解调原理 FSK信号的解调也有非相干和相干两种&#xff0c;FSK信号可以看作是用两个频率源交替传输得到的&#xff0c;所以FSK的接收机由…
阅读更多...
[构建 Vue 组件库] 小尾巴 UI 组件库 —— 横向商品卡片（仿淘宝）

[构建 Vue 组件库] 小尾巴 UI 组件库 —— 横向商品卡片（仿淘宝）

文章归档于&#xff1a;https://www.yuque.com/u27599042/row3c6 组件库地址 npm&#xff1a;https://www.npmjs.com/package/xwb-ui?activeTabreadmegitee&#xff1a;https://gitee.com/tongchaowei/xwb-ui 下载 npm i xwb-ui配置 按需导入 import {组件名 } from xwb-…
阅读更多...
css中flex和flex-grow的区别

css中flex和flex-grow的区别

设置了1个class为parent且宽度为700px的div父级元素&#xff1b; 它有3个子元素&#xff0c;分别宽高为100px&#xff1b; 其中item2的元素flex值为1&#xff0c;item3的元素flex值为2 <!DOCTYPE html> <html lang"en"> <head><style>.pare…
阅读更多...
车船边缘网关是如何给车辆船只定位的？

车船边缘网关是如何给车辆船只定位的？

随着智能交通系统的不断发展&#xff0c;车路协同成为了重要的研究方向之一。而AI边缘计算网关在这个领域中发挥着至关重要的作用。本文将重点介绍AI边缘计算网关在车路协同中的应用&#xff0c;并强调其中的重点词汇或短语。 首先&#xff0c;什么是AI边缘计算网关&#xff1…
阅读更多...
华为数据管理——《华为数据之道》

华为数据管理——《华为数据之道》

数据分析与开发 元数据是描述数据的数据&#xff0c;用于打破业务和IT之间的语言障碍&#xff0c;帮助业务更好地理解数据。 元数据是数据中台的重要的基础设施&#xff0c;元数据治理贯彻数据产生、加工、消费的全过程&#xff0c;沉淀了数据资产&#xff0c;搭建了技术和业务…
阅读更多...
Python实现猎人猎物优化算法(HPO)优化卷积神经网络分类模型(CNN分类算法)项目实战

Python实现猎人猎物优化算法(HPO)优化卷积神经网络分类模型(CNN分类算法)项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档视频讲解&#xff09;&#xff0c;如需数据代码文档视频讲解可以直接到文章最后获取。 1.项目背景 猎人猎物优化搜索算法(Hunter–prey optimizer, HPO)是由Naruei& Keynia于2022年提出的一种最新的…
阅读更多...
ps显示msvcp140.dll丢失的解决方法，四个解决方法分享

ps显示msvcp140.dll丢失的解决方法，四个解决方法分享

我想和大家分享一个关于ps显示msvcp140.dll丢失的问题以及解决方法。这个问题可能会困扰很多使用Photoshop软件的朋友&#xff0c;特别是在运行某些特定功能时&#xff0c;会出现“无法运行此程序&#xff0c;因为找不到”的错误提示。那么&#xff0c;如何解决这个问题呢&…
阅读更多...
现在嵌入式行业工作起薪是多少呢？发展怎么样？

现在嵌入式行业工作起薪是多少呢？发展怎么样？

今天闲逛看到有位毕业大学生询问的问题&#xff0c;我就来客观讨论一下&#xff0c;其实工作方面都是起薪多少取决于你个人的学历&#xff0c;能力等背景。嵌入式岗位的就业比起其他很多工程师岗位算还不错的&#xff0c;但是不如互联网&#xff0c;这一点不用质疑。起薪多少这…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023