路由的完整使用

多页面和单页面

多页面是指超链接等跳转到另一个HTML文件,单页面是仍是这个文件只是路由改变了页面的一部分结构.

路由的基本使用

使用vue2,则配套的路由需要是第3版.

1)下载vue-router插件

2)引入导出函数

3)new 创建路由对象

4)当写到vue的router后只能写路由对象,因此只能写一个.

5)应用到vue实例上,vue去渲染时会有路由.

当写Vue.use(路由函数)会对这个Vue生成的所以实例,无论是否一个文件,只要访问的时Vue,都会使得生成的实例对象会响应式router,以及axios时一个库,而路由只是一个插件.

1)写在vue实例上的路由对象生成时,对象配置routes数组,数组内的对象,path是路径,后面componnet组件.,当路径是/#/路由路径,则会仍生成前面的html文件,将该文件当中的router-view,将生成的组件替代这.,则实例内根目录的所有组件,path配置无需#/,在a标签上写href="#/friend"跳转当前的路径/#/

组件目录分类问题

将与路由有关的vue文件放到src/view文件夹下,普通组件,则放到components文件夹下

便于管理

路由的封装

将路由对象生成的所有步骤放置在src/router/index.js文件内,导出如有对象,便于管理.

已经执行下列步骤的vue函数,会对导出的

router-link标签

在包含router-view的路径文件下,写router-link标签,会生成DOM对象是A对象,会生成href

写to,生成的a对象,找的是to属性.编译成a对象,以及会给给每个a对象设置了,如果是含义路由路径

与a的href相同则,给a添加默认的,当处于另一个,会将其他的所在的router-link进行删除类.当路由

可以将上面的两个类改成自定义的类名'

当访问router对象内的这些变量.访问不到就用默认的呗.

疑问:必须配置router才能有router-link标签嘛?

路由传参(传到生成的组件内的vue实例)

1)查询参数传参

在router-link标签的to属性

<router-link    to="/search?key=1">跳转页面时,会给router-view,生成组件的实例添加this.$route.query对象,对象内含有属性值和属性名.

这里跳转的组件,和new 路由的对象,必须path是相同的.

2)动态路由传参

可以匹配/search

在这里写好,可以配置所有的/search/路径名,不能只是/search都会配置这个组件,且创建组件时会生成$route.params.words传过去.

路由重定向

在vue实例的router对象,则path:/会自动将路径变为/home.

寻找时是从上往下,*表示所有的路由组件,则显示之后的组件,如果是redirect则是跳转.

改变模式

路由的跳转方式

路由的跳转

路由的跳转传参

1-----

this.$route.query

2-------

$router.params.words

3-------

VueCli自定义创建项目

可以生成路由,不用手动去写路由

1)创建项目

2)选择第三个非vue2或vue3

3)勾选bable/router/css/linter勾选linter后所写的项目内必须是符合对应的规则,否则报错,比如运算符左右含有空格.不能有分号.

路由选3,vue2,

路由4,vue3

默认是history.hash模式.

使用less插件解析css

第三个无分号规则.

list on save 保存时校验

第一个将配置文件放到单独文件

是否保存以上配置.

但是以上会报错,但是没有高亮/错误显示

写这个项目,需要只拖入项目文件夹.

vscode的Eslint可以显示错误高亮

自动修正

可以保存时使其修改能修改的错误格式上的,但是变量没有使用但是定义这种不行,下面的是不讲代码格式化.

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

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

相关文章

Webpack常见插件和模式

目录 目录 目录认识 PluginCleanWebpackPluginHtmlWebpackPlugin自定义模版 DefinePlugin的介绍 ( 持续更新 )Mode 配置 认识 Plugin Loader是用于特定的模块类型进行转换&#xff1b; Plugin可以用于执行更加广泛的任务&#xff0c;比如打包优化、资源管理、环境变量注入等 …

国内IP切换软件:解锁网络世界的新钥匙

在数字化快速发展的今天&#xff0c;互联网已成为我们生活中不可或缺的一部分。然而&#xff0c;伴随着网络使用的深入&#xff0c;许多用户逐渐意识到&#xff0c;不同的IP地址可能会带来截然不同的网络体验。为了应对这一问题&#xff0c;国内IP切换软件应运而生&#xff0c;…

Java与Go:字符串转IP

在本文中&#xff0c;我们将了解如何将简单的对比Java和Go是如何将字符串解析为IP地址。 Java 在Java中&#xff0c;将字符串转换为IP地址最无脑的一个方法&#xff1a; import java.net.InetAddress; import java.net.UnknownHostException;public class Main {public stat…

深圳区块链交易所app系统开发,撮合交易系统开发

随着区块链技术的迅速发展和数字资产市场的蓬勃发展&#xff0c;区块链交易所成为了数字资产交易的核心场所之一。在这个快速发展的领域中&#xff0c;区块链交易所App系统的开发和撮合交易系统的建设至关重要。本文将探讨区块链交易所App系统开发及撮合交易系统的重要性&#…

数据库系统概论(超详解!!!) 第四节 关系数据库标准语言SQL(Ⅱ)

1.数据查询 SELECT [ ALL | DISTINCT] <目标列表达式>[&#xff0c;<目标列表达式>] … FROM <表名或视图名>[&#xff0c; <表名或视图名> ] … [ WHERE <条件表达式> ] [ GROUP BY <列名1> [ HAVING <条件表达式> ] ] [ ORDER BY…

【数据结构 | 图论】如何用链式前向星存图(保姆级教程,详细图解+完整代码)

一、概述 链式前向星是一种用于存储图的数据结构&#xff0c;特别适合于存储稀疏图&#xff0c;它可以有效地存储图的边和节点信息&#xff0c;以及边的权重。 它的主要思想是将每个节点的所有出边存储在一起&#xff0c;通过数组的方式连接&#xff08;类似静态数组实现链表…

SpringCloudConfig 使用git搭建配置中心

一 SpringCloudConfig 配置搭建步骤 1.引入 依赖pom文件 引入 spring-cloud-config-server 是因为已经配置了注册中心 <dependencies><dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-config-server</…

Elasticsearch从入门到精通-07ES底层原理学习

Elasticsearch从入门到精通-07ES底层原理和高级功能 &#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是程序员行走的鱼 &#x1f4d6; 本篇主要介绍和大家一块学习一下ES底层原理包括集群原理、路由原理、分配控制、分配原理、文档分析原理、文档并发安全原理以及一些高…

SQL-CRUD-2数据库实验

目录 第一关任务描述 相关知识 插入完整内容的行 插入选定内容的行 编程要求 测试说明 第一关代码 第二关任务描述 相关知识 删除表中的指定行 删除表中的所有行 编程要求 测试说明 第二关代码 第三关任务描述 相关知识 更新表中的指定行 编程要求 测试说明…

【多线程系列】你先说说synchronized的实现原理

面试官&#xff1a;听说你精通多线程&#xff0c;那我就考考你吧 面试官&#xff1a;不用慌尽管说&#xff0c;错了也没关系&#x1f60a;。。。 以贴近现实的【面试官面试】形式来分享技术&#xff0c;本期是《多线程系列》&#xff0c;感兴趣就关注我吧❤️ 面试官&#xff1…

L2-047 锦标赛

这题没做出来&#xff0c;查了一些博客&#xff0c;下面是我比较能接受的理解和书写方式。 读完题可以发现这是一个满二叉树&#xff0c;并且可以得到每场比赛失败者的信息&#xff08;决赛是胜利者和失败者都可以得到&#xff09; 对于一场比赛&#xff0c;它的胜利者要么是左…

Typora结合PicGo + Github搭建个人图床

目录 一 、GitHub仓库设置 1、新建仓库 2、创建Token 并复制保存 二、PicGo客户端配置 1、下载 & 安装 2、配置图床 三、Typora配置 一 、GitHub仓库设置 1、新建仓库 点击主页右上角的 号创建 New repository 填写仓库信息 2、创建Token 并复制保存 点击右上角…

JAVA的NIO和BIO底层原理分析

文章目录 一、操作系统底层IO原理1. 简介2. 操作系统进行IO的流程 二、BIO底层原理1. 什么是Socket2. JDK原生编程的BIO 三、Java原生编程的NIO1. 简介2. NIO和BIO的主要区别3. Reactor模式4. NIO的三大核心组件5. NIO核心源码分析 一、操作系统底层IO原理 1. 简介 IO&#x…

Python工具箱系列(五十一)

九宫格与词云 对图片进行九宫格切割&#xff0c;并且放到微信朋友圈曾经风靡一时。对于python来说&#xff0c;这个也非常简单。 from PIL import Image import mathdef ninerectanglegrid(inputfilename):"""实现九宫格切割Args:inputfilename (string): 输入…

【Vue3进阶】- 第2学堂小商城实战课程前言

该教程为进阶教程&#xff0c;如果你还不了解Vue3的基础知识&#xff0c;可以先前往Vue3基础教程&#xff0c;从入门到实战。 学习时遇到的任何疑问都欢迎在相应课文页面下方的问答区进行提问哦 我能学到什么&#xff1f; 编程写法千千万&#xff0c;实现需求是第一。 教程中…

Python+Django+Yolov5路面墙体桥梁裂缝特征检测识别html网页前后端

程序示例精选 PythonDjangoYolov5路面墙体桥梁裂缝特征检测识别html网页前后端 如需安装运行环境或远程调试&#xff0c;见文章底部个人QQ名片&#xff0c;由专业技术人员远程协助&#xff01; 前言 这篇博客针对《PythonDjangoYolov5路面墙体桥梁裂缝特征检测识别html网页前…

List操作add,clear,addall报错UnsupportedOperationException的解决办法

ArrayList和Arrays.ArrayList是两码事 ArrayList 支持 add&#xff0c;clear&#xff0c;addall Arrays.ArrayList不支持add&#xff0c;clear&#xff0c;addall 这个方法的使用时候&#xff0c;传递的数组必须是对象数组&#xff0c;而不是基本数据类型 JDK源码 /** *返回由…

Python-VBA编程500例-024(入门级)

字符串写入的行数(Line Count For String Writing)在实际应用中有着广泛的应用场景。常见的应用场景有&#xff1a; 1、文本编辑及处理&#xff1a;在编写或编辑文本文件时&#xff0c;如使用文本编辑器或文本处理器&#xff0c;经常需要处理字符串并确定其在文件中的行数。这…

Numpy 初体验

文章目录 第1关&#xff1a;Numpy 创建数组第2关&#xff1a;Numpy 数组的基本运算第3关&#xff1a;Numpy 数组的切片与索引第4关&#xff1a;Numpy 数组的堆叠第5关&#xff1a;Numpy 的拆分 第1关&#xff1a;Numpy 创建数组 编程要求 本关的任务是&#xff0c;补全右侧编辑…

深度学习 - PyTorch基本流程 (代码)

直接上代码 import torch import matplotlib.pyplot as plt from torch import nn# 创建data print("**** Create Data ****") weight 0.3 bias 0.9 X torch.arange(0,1,0.01).unsqueeze(dim 1) y weight * X bias print(f"Number of X samples: {len(…