VueRouter路由的使用（上）

news2025/10/31 7:58:14

文章目录

  • VueRouter路由的使用
    • p21
    • 路由的原理_hash改变
    • history
  • P22 认识vue-router
      • 路由的基本使用流程
      • 默认路径
      • router-link
      • 路由懒加载
      • 路由的其他属性
      • 动态路由的基本匹配
    • NotFound
      • 路由嵌套
      • 编程式导航

VueRouter路由的使用

p21

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

路由的原理_hash改变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <a href="#/home">home</a>
        <a href="#/about">about</a>

        <div class="content">Default</div>
    </div>

    <script>
        const contentEl = document.querySelector('.content')
        window.addEventListener('hashchange', () => {
            switch (location.hash) {
                case '#/home':
                    contentEl.innerHTML = 'Home'
                    break
                case '#/about':
                    contentEl.innerHTML = 'About'
                    break
                default:
                    contentEl.innerHTML = 'Default'
            }
        })
    </script>
</body>

</html>

在这里插入图片描述

\

history

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

P22 认识vue-router

在这里插入图片描述

路由的基本使用流程

在这里插入图片描述
在这里插入图片描述在这里插入图片描述
在这里插入图片描述在这里插入图片描述

默认路径

在这里插入图片描述

router-link

在这里插入图片描述

路由懒加载

在这里插入图片描述
在这里插入图片描述

路由的其他属性

在这里插入图片描述

动态路由的基本匹配

配置在这里插入图片描述

在这里插入图片描述

在这里插入图片描述在这里插入图片描述
在这里插入图片描述

NotFound

在这里插入图片描述
在这里插入图片描述

路由嵌套

在这里插入图片描述
在这里插入图片描述
然后在HomeView.vue中编写<router-link to="/home/message"></router-link>

<router-view></router-view>

编程式导航

在这里插入图片描述
在这里插入图片描述

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

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

相关文章

JavaScript 运算符

JavaScript 运算符

文章目录JavaScript 运算符JavaScript 算术运算符JavaScript 赋值运算符用于字符串的 运算符对字符串和数字进行加法运算JavaScript 运算符 运算符 用于赋值。 运算符 用于加值。 运算符 用于给 JavaScript 变量赋值。 算术运算符 用于把值加起来。 实例 指定变量值&am…
阅读更多...
Java基础学习笔记（十）—— 异常

Java基础学习笔记（十）—— 异常

异常1 异常概述2 异常处理方式2.1 JVM默认处理异常的方式2.2 throws方式处理异常2.3 throw抛出异常2.4 try-catch方式处理异常2.5 Throwable成员方法2.6 异常的练习3 自定义异常1 异常概述 异常&#xff1a;就是程序出现了不正常的情况。程序在执行的过程中&#xff0c;出现的…
阅读更多...
Vivado综合设置之-gated_clock_conversion

Vivado综合设置之-gated_clock_conversion

本文验证-gated_clock_conversion设置为on或off时&#xff0c;给Schematic带来的差异。 -gated_clock_conversion设置为on时&#xff0c;用于移除门控时钟&#xff0c;门控时钟是由门电路而非专用时钟模块&#xff08;例如MMCM或PLL&#xff09;生成的时钟。 门控时钟会对设计…
阅读更多...
Java-集合（3）

Java-集合（3）

Vector集合类 1.Vector底层保存数据的也是一个对象数组&#xff1a;protected Object[] elementDate; 2.Vector是线程同步的&#xff0c;也就是线程安全Vactor的操作方法都带有synchronized修饰。以此可以进行安全线程保障&#xff0c;所以在开发中如果确认只有一个线程操作集…
阅读更多...
dubbo学习笔记3（小d课堂）

dubbo学习笔记3（小d课堂）

dubbo高级特性 启动依赖检查 我们现在直接来启动我们的消费者&#xff1a; 它会报错。 我们 再去直接运行我们的消费者就不会报错。 我们也可以不在代码中去配置&#xff1a; 实际工作中比较建议使用这种方式。 dubbo.reference.check是配置所有的reference里的service都是f…
阅读更多...
C语言：大小端

C语言：大小端

大小端 对于整型来说&#xff0c;内存中存放的是补码&#xff0c;补码是按大小端模式进行存储&#xff1a; 大端存储数据低位存在内存高地址&#xff0c;高位存在内存低地址小端存储数据低位存在内存低地址&#xff0c;高位存在内存高地址 记忆方法 小小小&#xff1a;数据 小…
阅读更多...
前端组件库自定义主题切换探索-01

前端组件库自定义主题切换探索-01

探索原因背景 首先自然是项目有需求&#xff0c;这是必须去做的原因 其次&#xff0c;是我们项目没有直接使用市面上现成的基于element-ui或者ant-design的第三方UI框架&#xff0c;比如avue&#xff0c;而是有着自己的UI组件库 第三&#xff0c;我们的组件库基于ant-design-v…
阅读更多...
Win10下干净卸载VMware15.5

Win10下干净卸载VMware15.5

一、说明 虚拟机属于服务软件&#xff0c;在Windows10下卸载实属不易。下面请看我所总结的卸载文档。 二、如何彻底卸载VMware虚拟机 需要删除的部分很多&#xff0c;包括&#xff1a; 三、删除步骤一&#xff1a;需要禁用VM虚拟机服务 首先&#xff0c;因为VM的软件属于底层…
阅读更多...
【自学Python】Python转义字符

【自学Python】Python转义字符

文章来源嗨客网&#xff08;www.haicoder.net&#xff09; Python转义字符 Python转义字符教程 在编程中有一些字符是打不出来的&#xff0c;比如换行&#xff0c;提示音&#xff0c;下一个制表位等等&#xff0c;于是程序语言的开发者就设计了转义序列&#xff08;escape se…
阅读更多...
4 机器学习之决策树

4 机器学习之决策树

学习笔记自&#xff0c;慕课网 《Python3 入门人工智能》 https://https://coding.imooc.com/lesson/418.html#mid32776 决策树、异常检测、主成分分析 常用的分类方法&#xff1a; 逻辑回归的思路&#xff1a; 决策树的思路&#xff1a; 1. 决策树 1.1 ID3决策树&#x…
阅读更多...
Java 防御XSS攻击实战与示例代码

Java 防御XSS攻击实战与示例代码

XSS, 跨站脚本攻击， 简单来说， 就是非本站点的脚本被执行了。 关于XSS 的详细介绍和防御参考： XSS(跨站脚本)攻击与预防 和 跨站脚本攻击(XSS)及防范措施。 本篇介绍在Java 项目中如何快速修复XSS 漏洞。本篇使用的是黑名单的方式， 对于非法字符进行转义。 黑名单的方式…
阅读更多...
Win10的IE以及其他浏览器无法使用的解决方法

Win10的IE以及其他浏览器无法使用的解决方法

前言 最近&#xff0c;突然无法使用Win10的IE&#xff0c;网络连接正常&#xff0c;重置过IE&#xff0c;恢复过高级选项设置&#xff0c;检查过无代理设置&#xff0c;清理过缓存删除IE个人设置&#xff0c;以及清理过DNS解析缓存&#xff0c;IE都会显示无法访问此页面的网络…
阅读更多...
Django3还可以这样学之Django的创建

Django3还可以这样学之Django的创建

Django (Flask说&#xff1a;“其实我是你的双胞胎哥哥啊”) 一、前言 传统的web框架为MVC设计模式&#xff0c;即M是指业务模型&#xff0c;V是指用户界面&#xff0c;C则是控制器。虽然这种设计模式耦合性低、可重用性高、部署快等特点&#xff0c; 但是完全理解该设计模式…
阅读更多...
【机器学习】贝叶斯算法详解 + 公式推导 + 垃圾邮件过滤实战 + Python代码实现

【机器学习】贝叶斯算法详解 + 公式推导 + 垃圾邮件过滤实战 + Python代码实现

文章目录一、贝叶斯简介二、贝叶斯公式推导三、拼写纠正案例四、垃圾邮件过滤案例4.1 问题描述4.2 朴素贝叶斯引入五、基于朴素贝叶斯的垃圾邮件过滤实战5.1 导入相关库5.2 邮件数据读取5.3 构建语料表&#xff08;字典&#xff09;5.4 构建训练集的特征向量5.5 朴素贝叶斯算法…
阅读更多...
web服务器的相关配置

web服务器的相关配置

一&#xff1a;简单介绍web服务 1、什么是www www是world wide web的缩写&#xff0c;也就是全球信息广播的意思。通常说的上网就是使用www来查询用户所需要的信息。www可以结合文字、图形、影像以及声音等多媒体&#xff0c;并通过可以让鼠标单击超链接的方式将信息以Interne…
阅读更多...
数字化时代，企业如何培养员工的数据思维意识

数字化时代，企业如何培养员工的数据思维意识

很多的企业&#xff0c;他们都有意识想通过大数据或者商业智能BI来推动一些数据信息化的项目建设&#xff0c;比如企业的财务分析、经营管理分析、供应链分析、运营、市场分析等等&#xff0c;这都是很好的表现。 但在实际跟进和深入沟通的时候就发现很多分析的想法是没有办法…
阅读更多...
OpenCV(9)-图像轮廓

OpenCV(9)-图像轮廓

图像轮廓 图像轮廓概述 图像轮廓是具有相同颜色或强度的连续点的曲线 作用&#xff1a; 可以用于图形分析物体的识别与检测 注意&#xff1a; 为了检测的准确性&#xff0c;需要先对图像进行二值化或Canny操作画轮廓时会修改输入的图像 轮廓查找API&#xff1a; findConto…
阅读更多...
FastDFS简介/架构/安装/代码

FastDFS简介/架构/安装/代码

1简介/架构 1.1简单介绍 分布式文件系统&#xff0c;看名字就知道&#xff0c;它可以存储在不同的机器上。肯定也要有路由功能。 特点 备份容错&#xff0c;负载均衡&#xff0c;动态扩容 场景 0-500MB之间大小的文件存储&#xff08;图片&#xff0c;短视频&#xff0c;文…
阅读更多...
LeetCode[703]数据流中的第K大元素

LeetCode[703]数据流中的第K大元素

难度&#xff1a;简单题目&#xff1a;设计一个找到数据流中第 k大元素的类&#xff08;class&#xff09;。注意是排序后的第 k大元素&#xff0c;不是第 k个不同的元素。描述&#xff1a;请实现 KthLargest类&#xff1a;KthLargest(int k, int[] nums) 使用整数 k 和整数流 …
阅读更多...
【北邮果园大三上】数据挖掘

【北邮果园大三上】数据挖掘

数据挖掘 大数据 定义&#xff1a; 体积时效性种类值 数据挖掘模型 1.归纳已知 2.预测未来 1. 数据的质量处理和度量方法 1.1数据 1.1.1数据属性 属性类型: 标称(nominal)序数(ordinal)区间(interval)比率(ratio) 非对称的属性(asymmetric attribute): 对于非对称的…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023