Vue3【二十一】Vue 路由模式(createWebHashHistory /createWebHistory )和RouterLink写法
Vue3【二十一】Vue 路由模式(createWebHashHistory /createWebHistory )和RouterLink写法
Vue3【二十一】Vue 路由模式和普通组件目录结构
createWebHistory history模式:url不带#号,需要后端做url适配 适合销售项目 利于seo
createWebHashHistory Hash模式:url 带#号,不需要url适配,比较适合后端项目 不利于seo
路由命名 和 配置路由规则
Header 组件是一般组件一般放到components文件夹中
News About Home 组件是路由组件,一般存放在pages或views文件夹中
/*注意
1、路由逐渐通常存放在pages或views文件夹,一般组件通常存放在components文件夹中
2、通过点击路由链接,切换路由组件,视觉上‘消失’了的路由组件,默认是被 卸载 掉的,需要的时候再去挂载
3、路由组件切换时,会触发组件的beforeRouteEnter、beforeRouteUpdate、>beforeRouteLeave钩子函数
实例截图
目录结构
代码
app.vue
<template><div class="app"><Header></Header><!-- 导航区 --><div class="navigate"><RouterLink to="/home" active-class="active"> 首页 </RouterLink><!-- <RouterLink to="/news" active-class="active"> 新闻 </RouterLink> --><!-- to的对象写法 --><!-- 名称跳转 --> <RouterLink :to="{name:'xinwen'}" active-class="active"> 新闻 </RouterLink><!-- 路径跳转 --><RouterLink :to="{path:'/about'}" active-class="active"> 关于 </RouterLink></div><!-- 展示区 --><div class="main-content"><RouterView /></div></div>
</template><script lang="ts" setup name="App">
// npm install vue-router //安装路由器import { RouterView } from 'vue-router';
import Header from '@/components/Header.vue';
// Header 组件是一般组件一般放到components文件夹中
// News About Home 组件是路由组件,一般存放在pages或views文件夹中/*注意
1、路由逐渐通常存放在pages或views文件夹,一般组件通常存放在components文件夹中
2、通过点击路由链接,切换路由组件,视觉上‘消失’了的路由组件,默认是被 卸载 掉的,需要的时候再去挂载
3、路由组件切换时,会触发组件的beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave钩子函数*/</script><style scoped>
.app {background-color: #4fffbb;box-shadow: 0 0 10px;border-radius: 10px;padding: 10px;
}
.navigate {display: flex;justify-content: space-around;margin: 0 100px;
}
.navigate a {display: block;text-align: center;width: 90px;height: 40px;line-height: 40px;border-radius: 10px;background-color: #818080;text-decoration: none;color: #fff;/* font-size: 5px; */letter-spacing: 5px;
}
.navigate a.active {color: #ffc268;background-color: #fff;border: 1px solid #ffc268;font-weight: 900;/* text-shadow: 0 0 1px black; */font-family: 微软雅黑;
}.main-content {margin: 0 auto;margin-top: 30px;margin-bottom: 30px;border-radius: 10px;width: 90%;height:400px;border: 1px solid;
}
</style>
Header.vue
<template><h2 class="title">Vue3 路由和组件页面切换测试</h2>
</template><script setup lang="ts" name="Header"></script><style scoped>.title{text-align: center;word-spacing: 5px;margin: 30px 0;height: 70px;line-height: 70px;background-image: linear-gradient(45deg, #cecece, #fff);border-radius: 10px;box-shadow: 0 0 2px;font-size: 30px
}
</style>
index.ts
// 创建一个路由器,并暴漏出去// 第一步:引入createRouter
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// 引入各种组件
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from '@/pages/News.vue'
// 第二步:创建路由器
const router = createRouter({// 配置路由模式 // createWebHistory history模式:url不带#号,需要后端做url适配 适合销售项目 利于seo// createWebHashHistory Hash模式:url 带#号,不需要url适配,比较适合后端项目 不利于seohistory: createWebHistory(),// 配置路由规则routes: [// { path: '/', redirect: '/home' },// { path: '/home', component: Home },// { path: '/about', component: About },// { path: '/news', component: News }// 路由命名{ path: '/', redirect: '/home' },{ path: '/home', name: 'zhuye', component: Home },{ path: '/about', name: 'guanyu', component: About },{ path: '/news', name: 'xinwen', component: News }]
})// 第三步:导出路由器
export default router
home.vue
<template><div class="home"><img src="/public/logo.png" alt=""></div>
</template><script setup lang="ts" name="Home"></script><style scoped>
.home {display: flex;justify-content: center;align-items: center;height: 100%;
}
img {width: 10%;
}
</style>
相关文章:
Vue3【二十一】Vue 路由模式(createWebHashHistory /createWebHistory )和RouterLink写法
Vue3【二十一】Vue 路由模式(createWebHashHistory /createWebHistory )和RouterLink写法 Vue3【二十一】Vue 路由模式和普通组件目录结构 createWebHistory history模式:url不带#号,需要后端做url适配 适合销售项目 利于seo crea…...
【交易策略】#22-24 残差资金流强度因子
【交易策略】#22-24 残差资金流强度因子...
CentOS 7.9检测硬盘坏区、实物定位(三)
系列文章目录 CentOS 7.9上创建JBOD(一) CentOS 7.9上创建的JBOD阵列恢复(二) 文章目录 系列文章目录前言一、在系统中找到硬盘对应的盘符二、使用命令定位实物1.badblocks检测坏块2.对2T以上的硬盘检测(对本篇非必要…...
redis持久化方式—RDB
RDB快照 与AOF记录写操作命令不同,RDB直接记录内存中的二进制数据,reids恢复数据时,直接将RDB文件加载到内存中就可以了,听起来是不是RDB完虐AOF?那么看完本文,会让你的态度转变,因为RDB的缺点…...
java8实战1(让方法参数具备行为能力)
客户需求是查出颜色为green的苹果 客户需求变成查出颜色为red的苹果 假设现在客户需求又变了,找出黄色的呢?你想查什么颜色直接做为参数输入 让调用者输入颜色参数 问题是现在客户想把重量做为条件,来筛选苹果集合 这就为难了,客户需求随时会变 观察以上例子,发现有个共同…...
C#(C Sharp)学习笔记_多态【十九】
前言 个人觉得多态在面向对象编程中还比较重要的,而且不容易理解。也是学了一个下午,才把笔记写得相对比较完善,但仍欠缺一些内容。慢慢来吧…… 什么是多态? 基本概念 在编程语言和类型论中,多态(Poly…...
电子竞赛1——基于DDS的AM信号发生器
课题要求 产生AM调幅波; 要求:载波10K,被调制波1K; 短按键1(pin_143)改变该调幅波的调制度:25%、50%、75%; 长按按键1(pin_143)改变被调制信号频率&#…...
CentOS7的#!bash #!/bin/bash #!/bin/env bash #!/usr/bin/bash #!/usr/bin/env bash
bash脚本开头可写成 #!/bin/bash , #!/bin/env bash , #!/usr/bin/bash , #!/usr/bin/env bash #!/bin/bash , #!/usr/bin/bash#!/bin/env bash , #!/usr/bin/env bash CentOS7的 /bin 是 /usr/bin 的软链接, /sbin 是 /usr/sbin 的软链接, [root3050 ~]# ll /bin lrwxrwxrw…...
代码随想录第四十一天打卡
01背包问题 二维 代码随想录 视频讲解:带你学透0-1背包问题!| 关于背包问题,你不清楚的地方,这里都讲了!| 动态规划经典问题 | 数据结构与算法_哔哩哔哩_bilibili #include <iostream> #include <vector>…...
矩阵补全IGMC 学习笔记
目录 Inductive Graph-based Matrix Completion (IGMC) 模型 igmc推理示例: Inductive Graph-based Matrix Completion (IGMC) 模型 原版代码: IGMC/models.py at master muhanzhang/IGMC GitHub GNN推理示例 torch_geometric版本:tor…...
面试题之CSS
1. 引入样式的方式 外部样式 link import 区别 内部样式 /* 写在头部标签 */ <style></style>行内样式 2. 三行代码画三角形 .triangle{width:0px;border:100px solid;border-color:transparent transparent transparent red; }3.属性的继承 可继承的属性 …...
MFC扩展库BCGControlBar Pro v35.0新版亮点:重新设计的工具栏编辑器等
BCGControlBar库拥有500多个经过全面设计、测试和充分记录的MFC扩展类。 我们的组件可以轻松地集成到您的应用程序中,并为您节省数百个开发和调试时间。 BCGControlBar专业版 v35.0已全新发布了,这个版本改进类Visual Studio 2022的视觉主题、增强对多个…...
python调用SDK的问题
问题:Could not find module MvCameraControl.dll 原因:识别环境变量runtime异常 解决:指定具体绝对地址即可。MvCameraControl.dll的位置C:\Program Files (x86)\Common Files\MVS\Runtime\Win64_x64 MvCamCtrldll WinDLL("MvCamer…...
html入门综合练习
综合练习 通过实际项目练习可以更好地理解和掌握HTML、CSS和JavaScript。以下是几个综合练习项目的建议: 项目1:个人简历网页 创建一个包含以下内容的个人简历网页: 个人简介(姓名、照片、联系方式)教育背景工作经…...
函数模板的具体化
函数模板优点是通用性,可以解决某个方面的普遍性问题,但是这个世界上的事情不是绝对的,有普遍的,就有绝对的。举个栗子: #include <iostream> using namespace std; template <typename T> void Swap(T &…...
【Linux 内存管理】
文章目录 1. 为什么要有虚拟内存呢?🔍 1. 为什么要有虚拟内存呢?🔍...
AJAX 数据库
AJAX 数据库 1. 引言 AJAX(Asynchronous JavaScript and XML)是一种流行的网络开发技术,它允许网页在不重新加载整个页面的情况下与服务器交换数据和更新部分网页内容。AJAX技术与数据库的结合,为现代网络应用提供了更加丰富和动态的用户体验。本文将探讨AJAX如何与数据库…...
力扣719.找出第K小的数对距离
力扣719.找出第K小的数对距离 二分答案 朴素版 双指针遍历数组 超过界限break auto check [&](int mid) -> bool{int res0;for(int i0;i<n-1;i)for(int ji1;j<n;j){if(nums[j] - nums[i] > mid) break;elseif(res > k) return true;}return false;};优…...
富格林:掌握可信出金交易策略
富格林认为,黄金市场是起起落落,似乎机遇无处不在,但很少有人能真正抓住机遇。黄金可以做多也可以做空,做空主要是为了从黄金价格波动的价差中获利。只有采用正规可信的操作技巧,才能实现顺利获利出金,减少…...
HCS-华为云Stack-容器网络
HCS-华为云Stack-容器网络 容器隧道overlay VPC网络...
【CSS in Depth2精译】1.1 层叠
CSS 本质上就是声明规则,并让这些特定的规则在各种情况下生效。一个类添加到某个元素上,则应用这个类包含的这一些样式;元素 X 是元素 Y 的一个子节点,则应用另一些样式。浏览器于是根据这些规则,判定所有样式生效的具…...
【读博日记】拓扑结构(待修正)
Topology 拓扑学 内容来源于互联网,还在甄别中——20240617 拓扑结构指把实体抽象成与其形状大小无关的点,把连接实体的线路抽象成线,再研究这些电线之间的关系。 所谓相似的拓扑结构: 例如一个圆环变成正方形、长方形、三角形…...
QT 中setVisible()和setEnabled()的区别
setVisible(bool)和setEnabled(true)在PyQt(以及其他类似的图形用户界面框架)中分别用于控制控件的可见性和可用性,它们之间的主要区别如下: setVisible(bool) 功能:这个函数用于设置QWidget控件的可见状态。参数&am…...
【YashanDB知识库】PHP使用ODBC使用数据库绑定参数功能异常
【问题分类】驱动使用 【关键字】ODBC、驱动使用、PHP 【问题描述】 PHP使用PDO_ODBC连接yashan数据库,使用绑定参数获取数据时,客户现场出现报错 本地复现未出现异常报错,但是无法正确获取数据。 【问题原因分析】开启ODBC报错日志后&am…...
初级篇-Docker容器知识
Docker容器 容器主要是解决跨平台、跨服务运行环境的问题 容器将运行业务应用所需要的东西进行打包,包括依赖项、配置、脚本、二进制文件等。在容器中运行镜像,不用担心不同环境下运行不一致的问题。 容器本质上是一个特殊的进程,将资源、…...
【抽代复习笔记】19-群(十三):奇偶置换、循环置换的几个定理及例题
定义: ①在Sn中,能够表示为奇数多个对换乘积的置换称为“奇置换”,能够表示为偶数多个对换乘积的置换称为“偶置换”; ②所有偶置换的集合记为An。 例1:(1)计算S1和S2中奇、偶置换的数目&…...
RT-Thread简介及启动流程分析
阅读引言: 最近在学习RT-Thread的内部机制,觉得这个启动流程和一些底层原理还是挺重要的, 所以写下此文。 目录 1, RT-Thread简介 2,RT-Thread任务的几种状态 3, 学习资源推荐 4, 启动流程分…...
MCU嵌入式AI开发笔记-视频笔记同步更新
MCU嵌入式AI开发笔记 抖音B站等站点笔记视频同步更新 01嵌入式AI大的方向 STM32跑神经网络 http://news.eeworld.com.cn/mp/EEWorld/a134877.jspx 为什么可以在STM32上面跑神经网络?简而言之就是使用STM32CubeMX中的X-Cube-AI扩展包将当前比较热门的AI框架进行C代码的转化,…...
DoIP——step2:车辆发现
文章目录 前言一、IP地址配置1.1 AutoIP1.2 DHCP1.3 DoIP实体的IP地址配置流程二、车辆发现车辆声明报文内容如下:前言 完成诊断设备到车辆的物理连接并通过激活线使能诊断连接后边缘节点将会将连接状态传递至应用层,在开始车辆发现过程之前,需要先进行各自的IP地址配置,获…...
张家港高端网站建设公司/临安网站seo
轻量级网络之GhostNet前言动机Ghost模块G-bneckGhostNet网络结构实验性能消融实验Ghost模块 pytorch代码欢迎交流,禁止转载!!前言 《GhostNet: More Features from Cheap Operations》 论文地址:GhostNet: More Features from Ch…...
wordpress 怎么添加即时联系窗口/网店运营流程步骤
原标题:听说,近视的人智商更高?近视的你还好吗如果你在学校里走路的时候碰到了熟人跟他打招呼却没有得到回应千万不要生气因为他可能是因为……………………没戴眼镜!!!近日,德国美因茨大学科学…...
网站的运营费用吗/百度公司简介
起因: JDK的InheritableThreadLocal类可以完成父子线程值的传递。 但对于使用线程池等会缓存线程的组件的情况,线程由线程池创建好,并且线程是缓存起来反复使用的;这时父子线程关系的上下文传递已经没有意义,应用中要做…...
西安网站建设招骋/网络推广与优化
情况描述:用一个30行代码的python文件,处理300M的数据,用到的数据结构有:pandas.DataFrame(), list, dict,二重循环,处理完一次写入磁盘。问题:内存占用率97%-99%,大约1.5G内存&…...
微网站开发平台 开源/网站建设公司哪家好?
如何删除一行 sed -i /search some thing/d nginx.conf...
如何建设公司的网站/网站排名
请确保具备以下条件: Internet 连接。 计算机C盘大于6 GB 的可用空间用于下载。 8GB的U盘。建议使用空白U盘,因为其中的任何内容都将被删除。重要信息 建议在运行 Windows7 或Windows8.1 的电脑上使用介质创建工具。如果你在运行Windows10 的电脑上运行此…...