Vue路由一(简介、分类、基本使用、注意事项)

news2024/11/23 20:13:55

目录

  • 1. 简介
  • 2. 路由的分类
  • 3. 基本使用
  • 4. 注意事项

1. 简介

  1. 路由就是一组key:value的对应关系。vue可能是function或component
  2. 多个路由,需要经过路由器管理

路由

是为了实现SPA(single page web application)单页面应用。以前需要实现多个html,现在只需实现一个html就能达到多个html的功能。如点击导航区的班级管理,只有url地址发生变化,而页面不会刷新,也不会打开新的标签页
SPA应用

SPA的原理:当我们点击班级管理,router发现url路径变成了/class,就会去加载班级组件;router发现url路径变成了/subject,就会去加载学科组件
SPA的原理

2. 路由的分类

路由vue-router是vue的一个插件库,专门用来实现SPA应用

  • 后端路由:
    • 理解:value是function, 用于处理客户端提交的请求
    • 工作过程:服务器接收到一个请求时, 根据请求路径找到匹配的函数
      来处理请求, 返回响应数据
  • 前端路由:
    • 理解:key是url的路径,value是component,用于展示页面内容
    • 工作过程:当浏览器的路径改变时, 对应的组件就会显示

3. 基本使用

  1. 使用命令cnpm install vue-router@3安装路由插件
  2. 同时使用命令cnpm install bootstrap@3安装bootstrap,后面的示例会用到里面的bootstrap.css
  3. About.vue
<template>
  <h2>我是About的内容</h2>
</template>

<script>
  export default {
    name: 'About'
  }
</script>
  1. News.vue
<template>
	<h2>我是News的内容</h2>
</template>

<script>
	export default {
		name:'News'
	}
</script>
  1. src/router/index.js。创建路由器,定义url路径和组件的映射规则。如访问/about就加载About组件
// 该文件专门用于创建整个应用的路由器
import VueRouter from 'vue-router'
// import {createRouter} from 'vue-router'

// 引入组件
import About from '../components/About'
import News from '../components/News'

// 创建并暴露一个路由器
// export default createRouter({})
export default new VueRouter({
	routes:[
		{
			path:'/about',
			component:About
		},
		{
			path:'/news',
			component:News
		},
		{
			path:'/',
			redirect:'/about'
		}
	],
	// 设置每次url跳转后,右侧滚动条的位置
	scrollBehavior() {
	    return {
	        left: 0,
	        top: 0
	    }
    }
})
  1. App.vue
    • 这里的css都是通过import 'bootstrap/dist/css/bootstrap.css'来实现的
    • 使用<router-link>标签,来实现<a>标签的跳转效果,最终也会被解析成<a>标签。to表示跳转的路径,就会激活路由器路径对应的组件,当点击当前标签时会激活active-class所在的css样式
    • <router-view>用于显示激活的组件
<template>
  <div>
    <div class="row">
      <div class="col-xs-offset-2 col-xs-8">
        <div class="page-header"><h2>Vue Router Demo</h2></div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-2 col-xs-offset-2">
        <div class="list-group">
          <!-- 原始html中我们使用a标签实现页面的跳转 -->
          <!-- <a class="list-group-item active" href="./about.html">About</a> -->
          <!-- <a class="list-group-item" href="./news.html">News</a> -->

          <!-- Vue中借助router-link标签实现路由的切换 -->
          <router-link class="list-group-item" active-class="active" to="/about">About</router-link>
          <router-link class="list-group-item" active-class="active" to="/news">News</router-link>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="panel">
          <div class="panel-body">
            <!-- 原始html中我们使用h2标签直接显示内容 -->
            <!-- <h2>我是XXX的内容</h2> -->

            <!-- 指定组件的呈现位置 -->
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import 'bootstrap/dist/css/bootstrap.css'

	export default {
		name:'App'
	}
</script>
  1. main.js。引入路由插件并使用路由插件;引入路由器,并开启路由器
import Vue from 'vue'
import App from './App.vue'

// 引入VueRouter
import VueRouter from 'vue-router'
// 引入路由器
import router from './router'

Vue.config.productionTip = false

Vue.use(VueRouter)

const vm = new Vue({
    el: '#app',
    router: router,
    render: h => h(App)
})
  1. 启动项目。先访问http://localhost:8080/#/的页面显示效果如下。导航栏没有激活css样式,而且内容区也没显示内容

访问首页

点击About,页面的url变成了http://localhost:8080/#/about,但是并没有重新加载一次页面。页面显示如下。导航栏的About激活css样式,而且内容区显示About组件的内容

显示About组件

点击News,页面的url变成了http://localhost:8080/#/news,但是并没有重新加载一次页面。页面显示如下。导航栏的News激活css样式,而且内容区显示News组件的内容

显示News组件

4. 注意事项

  1. 路由组件通常存放在pages文件夹,一般组件通常存放在components文件夹
  2. 通过在导航栏切换,路由组件默认是被销毁掉的,需要的时候再去挂载
  3. 每个组件都有自己的$route属性,里面存储着自己的路由信息
  4. 整个应用只有一个router,可以通过组件的$router属性获取到

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

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

相关文章

零基础也能掌握!大模型训练指南

在这个信息爆炸的时代&#xff0c;人工智能技术正以前所未有的速度渗透到我们生活的方方面面。从智能手机上的语音助手到自动驾驶汽车&#xff0c;AI的应用无处不在。而在这些令人惊叹的技术背后&#xff0c;大语言模型&#xff08;LLM&#xff09;扮演着至关重要的角色。它们不…

Navicat On-Prem Server 2.0 | MySQL与MariaDB基础管理功能正式上云

近日&#xff0c;Navicat 发布了 Navicat On-Prem Server 2.0 的重大版本更新。这标志着这款自2021年首发的私有云团队协作解决方案迈入了一个崭新的阶段。此次2.0版本的飞跃性升级&#xff0c;核心聚焦于MySQL与MariaDB基础管理功能的全面革新与强化&#xff0c;赋予了用户的操…

当 PLC 遇见 “IT”

IT&OT 深度融合工控人加入PLC工业自动化精英社群 IT & OT integration 当今不断发展的工业自动化世界&#xff0c;在智能、高效和快速的系统和软件应用中&#xff0c;数据扮演着越来越重要的角色。传统的 IT 网络中&#xff0c;提供了丰富多彩的规范和协议&#xff0…

PHP即刻送达同城派送小程序系统

即刻送达&#xff0c;同城派送小程序系统让生活更便捷 &#x1f680; 瞬间连接&#xff0c;即刻送达的奇迹 你是否曾经因为等待快递而焦急万分&#xff1f;是否渴望有一种方式能让物品像魔法一样瞬间出现在你面前&#xff1f;现在&#xff0c;有了“即刻送达同城派送小程序系…

交易所站队“NEIRO”?MEME内战进行时

加密市场总有“狗”传奇。 日前&#xff0c;此前一度被称为新一代“狗狗币”的NEIRO合约被OKX 和 Binance先后上线&#xff0c;在交易所推动下&#xff0c;NEIRO迅速暴涨超6倍。而这一上线&#xff0c;也正式宣告分庭抗礼的竞品“Neiro”走向缓慢的消亡。 大小写MEME的最终结局…

快人一步迅为LPDDR5版本瑞芯微RK3588核心板升级了

性能强--iTOP-3588开发板采用瑞芯微RK3588处理器&#xff0c;是全新一代ALoT高端应用芯片&#xff0c;采用8nm LP制程&#xff0c;搭载八核64位CPU&#xff0c;四核Cortex-A76和四核Cortex-A55架构&#xff0c;主频高达2.4GHZ&#xff0c;8GB内存&#xff0c;32GB EMMC。四核心…

小白学大模型:四种文本解码策略

在大型语言模型&#xff08;LLM&#xff09;的迷人世界中&#xff0c;模型架构、数据处理和优化常常成为关注的焦点。但解码策略在文本生成中扮演着至关重要的角色&#xff0c;却经常被忽视。 在这篇文章中&#xff0c;我们将通过深入探讨贪婪搜索和束搜索的机制&#xff0c;以…

电机驱动开发之主控板

目录 1.主要器件选型2.原理图设计电源调理最小系统通讯接口显示器 3.PCB绘制4.打板验证5.总结 1.主要器件选型 器件参数理由MCUSTM32CBT6资源丰富价格低廉LDOASM1117&#xff08;5V-3.3V&#xff09;常见CANSIT1057T常见UARTType-C CH340使用常见Type-c线通讯即可屏幕ips TFT资…

sheng的学习笔记-AI-话题模型(topic model),LDA模型,Unigram Model,pLSA Model

AI目录&#xff1a;sheng的学习笔记-AI目录-CSDN博客 基础知识 什么是话题模型(topic model) 话题模型(topic model)是一族生成式有向图模型&#xff0c;主要用于处理离散型的数据&#xff08;如文本集合&#xff09;​&#xff0c;在信息检索、自然语言处理等领域有广泛应用…

【赵渝强老师】大数据主从架构的单点故障

大数据体系架构中的核心组件都是主从架构&#xff0c;即&#xff1a;存在一个主节点和多个从节点&#xff0c;从而组成一个分布式环境。下图为展示了大数据体系中主从架构的相关组件。   视频讲解如下&#xff1a; 大数据主从架构的单点故障 【赵渝强老师】大数据主从架构的…

【大模型专栏—入门篇】科研论文疑惑汇总

大模型专栏介绍 &#x1f60a;你好&#xff0c;我是小航&#xff0c;一个正在变秃、变强的文艺倾年。 &#x1f514;本文为大模型专栏子篇&#xff0c;大模型专栏将持续更新&#xff0c;主要讲解大模型从入门到实战打怪升级。如有兴趣&#xff0c;欢迎您的阅读。 &#x1f4…

【多线程】手把手带你学习定时器那些事

&#x1f490;个人主页&#xff1a;初晴~ &#x1f4da;相关专栏&#xff1a;多线程 / javaEE初阶 在软件开发中&#xff0c;有一些代码逻辑并不需要立马就被执行&#xff0c;可能需要等一段时间在执行。就好像我们会用闹钟来提醒我们过一段时间后要做某事一样&#xff0c;代码…

裸土检测算法、裸土检测算法样本标注,裸土覆盖检测算法

裸土检测算法主要用于环境保护、土地管理和农业等领域&#xff0c;通过图像识别技术来检测地表上的裸露土壤区域。这种技术对于土地退化监测、水土流失预防、农田管理等方面有着重要意义。以下是关于裸土检测算法的技术实现、应用场景及优势的详细介绍。 应用场景 裸土检测算法…

kafka原理剖析及实战演练

一、消息系统概述 一&#xff09;消息系统按消息发送模型分类 1、peer-to-peer&#xff08;单播&#xff09; 特点&#xff1a; 一般基于pull或polling接收消息发送对队列中的消息被一个而且仅仅一个接收者所接收&#xff0c;即使有多个接收者在同一队列中侦听同一消息即支持异…

JVM - GC垃圾回收

文章目录 目录 文章目录 1. 自动垃圾回收 1.1 垃圾回收区域 2. 方法区回收 3. 堆回收 3.1 对象已死&#xff1f; 3.1.1 引用计数算法 3.1.2 可达性分析算法 3.1.3 再谈引用 强引用 软引用 弱引用 虚引用 3.2 垃圾收集算法 3.2.1 分代收集理论 3.2.2 垃圾回收算…

Android U 多任务启动分屏——Launcher流程(下分屏 更新中)

前文 Android U 多任务启动分屏——Launcher流程&#xff08;上分屏&#xff09; 最近任务onClick事件的监听 在最近任务中每个任务都是一个TaskView&#xff0c;对TaskView操作&#xff0c;就是每个任务的操作。 代码路径&#xff1a;packages/apps/Launcher3/quickstep/…

安装Anaconda(过程)

Anaconda是一个开源的Python发行版本&#xff0c;用来管理Python相关的包&#xff0c;安装Anaconda可以很方便的切换不同的环境&#xff0c;使用不同的深度学习框架开发项目&#xff0c;本文将详细介绍Anaconda的安装。 一、安装 1、安装方式 官网&#xff1a;“https://www.…

C#环境搭建和入门教程--vs2022之下

目录 1.环境搭建 2.先让程序跑起来 3.C#代码结构 4.变量&#xff0c;输入输出介绍 5.内容输入和类型转换 1.环境搭建 我们的这个c#基础学习主要就是在这个vs2022上面进行的&#xff0c;我们的这个c/c使用的都是这个平台 我们首先检查一下我们的这个环境是不是完全的配置了…

什么是API网关(API Gateway)?

1. 什么是API网关&#xff08;API Gateway&#xff09;&#xff1f; 在微服务体系结构中&#xff0c;客户端可能与多个前端服务进行交互。 API 网关位于客户端与服务之间。 它充当反向代理&#xff0c;将来自客户端的请求路由到服务。 它还可以执行各种横切任务&#xff0c;例…

技术美术一百问(01)

———————————————————问题篇———————————————————— 基础&#xff1a; 解释BRDF&#xff1f; 什么是Lightmap&#xff1f; 游戏里的各种液体怎么实现&#xff1f; 渲染流水线中&#xff0c;屏幕中的一个像素是怎么绘制出来的&#xff…