当前位置: 首页 > news >正文

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 路由模式&#xff08;createWebHashHistory /createWebHistory &#xff09;和RouterLink写法 Vue3【二十一】Vue 路由模式和普通组件目录结构 createWebHistory history模式&#xff1a;url不带#号&#xff0c;需要后端做url适配 适合销售项目 利于seo crea…...

【交易策略】#22-24 残差资金流强度因子

【交易策略】#22-24 残差资金流强度因子...

CentOS 7.9检测硬盘坏区、实物定位(三)

系列文章目录 CentOS 7.9上创建JBOD&#xff08;一&#xff09; CentOS 7.9上创建的JBOD阵列恢复&#xff08;二&#xff09; 文章目录 系列文章目录前言一、在系统中找到硬盘对应的盘符二、使用命令定位实物1.badblocks检测坏块2.对2T以上的硬盘检测&#xff08;对本篇非必要…...

redis持久化方式—RDB

RDB快照 与AOF记录写操作命令不同&#xff0c;RDB直接记录内存中的二进制数据&#xff0c;reids恢复数据时&#xff0c;直接将RDB文件加载到内存中就可以了&#xff0c;听起来是不是RDB完虐AOF&#xff1f;那么看完本文&#xff0c;会让你的态度转变&#xff0c;因为RDB的缺点…...

java8实战1(让方法参数具备行为能力)

客户需求是查出颜色为green的苹果 客户需求变成查出颜色为red的苹果 假设现在客户需求又变了,找出黄色的呢?你想查什么颜色直接做为参数输入 让调用者输入颜色参数 问题是现在客户想把重量做为条件,来筛选苹果集合 这就为难了,客户需求随时会变 观察以上例子,发现有个共同…...

C#(C Sharp)学习笔记_多态【十九】

前言 个人觉得多态在面向对象编程中还比较重要的&#xff0c;而且不容易理解。也是学了一个下午&#xff0c;才把笔记写得相对比较完善&#xff0c;但仍欠缺一些内容。慢慢来吧…… 什么是多态&#xff1f; 基本概念 在编程语言和类型论中&#xff0c;多态&#xff08;Poly…...

电子竞赛1——基于DDS的AM信号发生器

课题要求 产生AM调幅波&#xff1b; 要求&#xff1a;载波10K&#xff0c;被调制波1K&#xff1b; 短按键1&#xff08;pin_143&#xff09;改变该调幅波的调制度&#xff1a;25%、50%、75%&#xff1b; 长按按键1&#xff08;pin_143&#xff09;改变被调制信号频率&#…...

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背包问题 二维 代码随想录 视频讲解&#xff1a;带你学透0-1背包问题&#xff01;| 关于背包问题&#xff0c;你不清楚的地方&#xff0c;这里都讲了&#xff01;| 动态规划经典问题 | 数据结构与算法_哔哩哔哩_bilibili #include <iostream> #include <vector>…...

矩阵补全IGMC 学习笔记

目录 Inductive Graph-based Matrix Completion (IGMC) 模型 igmc推理示例&#xff1a; Inductive Graph-based Matrix Completion (IGMC) 模型 原版代码&#xff1a; IGMC/models.py at master muhanzhang/IGMC GitHub GNN推理示例 torch_geometric版本&#xff1a;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扩展类。 我们的组件可以轻松地集成到您的应用程序中&#xff0c;并为您节省数百个开发和调试时间。 BCGControlBar专业版 v35.0已全新发布了&#xff0c;这个版本改进类Visual Studio 2022的视觉主题、增强对多个…...

python调用SDK的问题

问题&#xff1a;Could not find module MvCameraControl.dll 原因&#xff1a;识别环境变量runtime异常 解决&#xff1a;指定具体绝对地址即可。MvCameraControl.dll的位置C:\Program Files (x86)\Common Files\MVS\Runtime\Win64_x64 MvCamCtrldll WinDLL("MvCamer…...

html入门综合练习

综合练习 通过实际项目练习可以更好地理解和掌握HTML、CSS和JavaScript。以下是几个综合练习项目的建议&#xff1a; 项目1&#xff1a;个人简历网页 创建一个包含以下内容的个人简历网页&#xff1a; 个人简介&#xff08;姓名、照片、联系方式&#xff09;教育背景工作经…...

函数模板的具体化

函数模板优点是通用性&#xff0c;可以解决某个方面的普遍性问题&#xff0c;但是这个世界上的事情不是绝对的&#xff0c;有普遍的&#xff0c;就有绝对的。举个栗子&#xff1a; #include <iostream> using namespace std; template <typename T> void Swap(T &…...

【Linux 内存管理】

文章目录 1. 为什么要有虚拟内存呢&#xff1f;&#x1f50d; 1. 为什么要有虚拟内存呢&#xff1f;&#x1f50d;...

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;};优…...

富格林:掌握可信出金交易策略

富格林认为&#xff0c;黄金市场是起起落落&#xff0c;似乎机遇无处不在&#xff0c;但很少有人能真正抓住机遇。黄金可以做多也可以做空&#xff0c;做空主要是为了从黄金价格波动的价差中获利。只有采用正规可信的操作技巧&#xff0c;才能实现顺利获利出金&#xff0c;减少…...

HCS-华为云Stack-容器网络

HCS-华为云Stack-容器网络 容器隧道overlay VPC网络...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

Unsafe Fileupload篇补充-木马的详细教程与木马分享(中国蚁剑方式)

在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马&#xff08;服务器方面的&#xff09;的原理&#xff0c;连接&#xff0c;以及各种木马及连接工具的分享 文件木马&#xff1a;https://w…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

C++.OpenGL (14/64)多光源(Multiple Lights)

多光源(Multiple Lights) 多光源渲染技术概览 #mermaid-svg-3L5e5gGn76TNh7Lq {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-3L5e5gGn76TNh7Lq .error-icon{fill:#552222;}#mermaid-svg-3L5e5gGn76TNh7Lq .erro…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

[ACTF2020 新生赛]Include 1(php://filter伪协议)

题目 做法 启动靶机&#xff0c;点进去 点进去 查看URL&#xff0c;有 ?fileflag.php说明存在文件包含&#xff0c;原理是php://filter 协议 当它与包含函数结合时&#xff0c;php://filter流会被当作php文件执行。 用php://filter加编码&#xff0c;能让PHP把文件内容…...

人工智能--安全大模型训练计划:基于Fine-tuning + LLM Agent

安全大模型训练计划&#xff1a;基于Fine-tuning LLM Agent 1. 构建高质量安全数据集 目标&#xff1a;为安全大模型创建高质量、去偏、符合伦理的训练数据集&#xff0c;涵盖安全相关任务&#xff08;如有害内容检测、隐私保护、道德推理等&#xff09;。 1.1 数据收集 描…...