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>

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

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

相关文章

【SCAU数据挖掘】数据挖掘期末总复习题库判断题及解析

1.离群点可以是合法的数据对象或者值。( ✓) 解析&#xff1a;离群点&#xff08;Outliers&#xff09;通常是与数据集中其他数据显著不同的数据点&#xff0c;但它们可以是合法的数据值。这些值可能是由于测量误差、数据录入错误、数据分布的自然属性等原因产生的。 3.关联规…

Spring框架的原理及应用详解(六)

本系列文章简介&#xff1a; 在当今的软件开发世界中&#xff0c;随着应用复杂性的不断增加和技术的快速发展&#xff0c;传统的编程方式已经难以满足快速迭代、高可扩展性和易于维护的需求。为此&#xff0c;开发者们一直在寻求更加高效、灵活且易于管理的开发框架&#xff0c…

[DDR4] DDR4 相对 DDR3差异与优势

依公知及经验整理,原创保护,禁止转载。 传送门: 总目录 1 差异总览 出处: https://www.kingston.com.cn/en/memory/ddr4-overview Description 描述DDR3DDR4Advantage 优势电压1.5V1.2V降低内存功耗需求容量512Mb-8Gb4Gb-16Gb更大的 DIMM 容量数据速率800Mb/s – 2133Mb/s1…

C#——结构和类问题总结

C#——结构和类问题总结 前言一、结构体是什么&#xff1f;1&#xff09;定义2&#xff09;特点 二、类&#xff08;对象&#xff09;是什么&#xff1f;1&#xff09;定义2&#xff09;特点 三、两者的差异性与选择环境&#xff1f;1&#xff09;差异性2&#xff09;选择环境 …

推荐一款WPF绘图插件OxyPlot

开始 使用 NuGet 包管理器添加对 OxyPlot 的引用(如果要使用预发布包,请参阅下面的详细信息)向用户界面添加PlotView在代码中创建一个PlotModel绑定到你的属性PlotModelModelPlotView例子 您可以在代码存储库的文件夹中找到示例。/Source/Examples NuGet 包 最新的预发布包由…

前端工程师不是软件工程师?

在当前的技术生态系统中&#xff0c;前端工程师与软件工程师这两个角色经常被混淆。尽管它们在某些方面有重叠&#xff0c;但实际上存在显著的差异。尤其是在前端工程师培训班出身的背景下&#xff0c;这种差异更为明显。本文将探讨为什么前端工程师不应被简单地归类为软件工程…

CyberDAO:引领Web3时代的DAO社区文化

致力于Web3研究和孵化 CyberDAO自成立以来&#xff0c;致力于推动Web3研究和孵化&#xff0c;吸引了来自技术、资本、商业、应用与流量等领域的上千名热忱成员。我们为社区提供多元的Web3产品和商业机会&#xff0c;触达行业核心&#xff0c;助力成员捕获Web3.0时代的红利。 目…

C语言---------深入理解指针

目录 一、字符指针 二、指针数组&#xff1a; 三、数组指针&#xff1a; 1、定义&#xff1a; 2、&数组名和数组名区别&#xff1a; 3、数组指针的使用&#xff1a; 四、数组参数&#xff0c;指针参数&#xff1a; 1、一维数组传参&#xff1a; 2、二维数组传参&am…

后端防接口被刷

1&#xff09;防火墙 防火墙也是互联网安全攻防中重要的屏障&#xff0c;我们通过配置访问规则&#xff0c;可以限制只有被允许的IP才可以进行访问。 防火墙还可以识别和阻止DDoS攻击&#xff0c;通过识别并过滤恶意流量请求&#xff0c;防火墙可以有效的防御&#xff0c;保护…

模拟电子技术基础(二)--PN结

PN结的本质 芯片都是由硅晶体制成&#xff0c;单个硅原子最外层有带有4个电子 在纯硅当中这些电子会两两形成共价键&#xff0c;此时周围形成非常稳定的八电子结构 在一个回路中&#xff0c;灯泡不亮&#xff0c;不导通&#xff0c;因为电池无法吸引其中的电子离开&#xff0c…

面向对象程序设计》第5章 多态(选择 判断 填空)

1-1 在类的定义中,前面有virtual关键字的成员函数就是虚函数。 T F | 参考答案 答案 T 2分 1-2 通过基类指针调用基类和派生类中的同名虚函数时,若该指针指向一个基类的对象,那么被调用的是基类的虚函数。 T F | 参考答案 答案 T 2分 1-3 通过基类指针调用…

Zombie Animations Set

僵尸动画合集,包括成对攻击/抓取、各种移动方式、爬行、击中反应、死亡动画等。 生产说明 动画总数:99(包括22个位置变化) 配对动画:36 攻击次数:6次 爬网:9 命中反应:6 空转:14 行程2 跑步次数:9次 短跑:2 匝数:3 步行次数:12次 免责声明 任何游戏玩法蓝图都不包…

【JavaScript】MDN

一、初识 1.1 基础 1.1.1 语言速成课 1.1.1.1 变量 ​ 变量是存储值的容器。首先用let关键字声明一个变量&#xff0c;后面跟着你给变量的名字 ​ 变量命名区分大小写 ​ 分号在JavaScript中是用来分隔语句的&#xff0c;但是如果语句后面有一个换行符(或者在{block}中只…

力扣每日一题 6/16 字符串 + 随机一题 动态规划/数学

博客主页&#xff1a;誓则盟约系列专栏&#xff1a;IT竞赛 专栏关注博主&#xff0c;后期持续更新系列文章如果有错误感谢请大家批评指出&#xff0c;及时修改感谢大家点赞&#x1f44d;收藏⭐评论✍ 521.最长特殊序列 I【简单】 题目&#xff1a; 给你两个字符串 a 和 b&am…

【猫狗分类】Pytorch VGG16 实现猫狗分类4-开始训练

背景 现在&#xff0c;我们已经完成了&#xff0c;数据集的清洗&#xff0c;标签的制作&#xff0c;也把VGG16的模型建立好了。那接下来&#xff0c;我们应该把数据&#xff0c;放到我们搭建的vgg16的模型里面&#xff0c;让模型针对这些猫和狗的图片&#xff0c;去进行训练&a…

面试题 17.17. 多次搜索

链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 题解&#xff1a; class Solution { private:struct Trie {Trie() {end false;index -1;next.resize(26);}bool end;int index;std::vector<std::unique_ptr<Trie>> next;};void insert_trie(int in…

5.3.2_1 线索二叉树的概念

&#x1f44b; Hi, I’m Beast Cheng &#x1f440; I’m interested in photography, hiking, landscape… &#x1f331; I’m currently learning python, javascript, kotlin… &#x1f4eb; How to reach me --> 458290771qq.com 喜欢《数据结构》部分笔记的小伙伴可以…

接口和抽象类:如何使用普通类模拟接口和抽象类

目录 1.引言 2.抽象类和接口的定义与区别 3.抽象类和接口存在的意义 4.模拟实现抽象类和接口 5.抽象类和接口的应用场景 1.引言 在面向对象编程中&#xff0c;抽象类和接口是两个经常被提及的语法概念&#xff0c;也是面向对象编程的四大特性&#xff0c;以及很多设计模式…

借报告Team ID错误谈谈Mac app文件签名与公证

文章目录 目的起因流程熟悉本地证书、认证证书申请在钥匙串中创建要公证app的profile(公证的时候会用到)程序打包后App文件进行app签名压缩打包公证公证变化在WWDC19, 苹果在MacOS 10.14之后引入了公证(Notarization)这一机制来提升安全性. 主要分以下几步新的公证workflow公…

使用KVM制作镜像

资源列表 操作系统 IP Centos7&#xff0c;桌面版 192.168.10.57 安装KVM 安装软件包 yum -y install qemu-kvm qemu-kvm-tools qemu-img bridge-utils libvirt virt-install virt-manager 检查有否支持虚拟化 grep -e vmx -e svm /proc/cpuinfo #VMX是英特尔版本&…