3、创建项目,什么是路由

news/2024/7/10 0:47:19 标签: vue

一、创建项目

  • 第一次全局安装脚手架 npm install -g @vue/cli
  • vue create 项目名

二、什么是路由?

  • 路由就是一组 key-value 的对应关系
  • 多个路由,需要经过路由器的管理

1、后端路由:

  • 每个url地址都对应着不同的静态资源
  • 对于普通的网站。所有的超链接都是URL地址,所有的URL地址都是对应服务器上对应的资源

2、前端路由:

  • 对于单页面的应用程序,通过 hash(#)来实现不同组件之间的切换
  • 对于单页面应用程序来说,主要通过URL中的hash(#号)来实现不同页面之间的切换,同时,hash有一个特点:HTTP请求中不会包含hash相关的内容;所以,单页面程序中的页面跳转主要用hash实现;

3、使用路由:

  • 引入路由
  • 创建路由实例
  • 创建映射关系
    • 路有对象 { path:“路由地址”,component:组件 }
  • 挂载到vue实例上
  • 预留展示区域
  • 路由跳转
    • <router-link to="路由地址"></router-link>

4、style标签中的

  • 样式隔离 scoped
  • 声明文件类型 lang

image-20240326101015040


http://www.niftyadmin.cn/n/5453378.html

相关文章

【linux深入剖析】基础IO操作 | 使用Linux库函数实现读写操作 | 文件相关系统调用接口

&#x1f341;你好&#xff0c;我是 RO-BERRY &#x1f4d7; 致力于C、C、数据结构、TCP/IP、数据库等等一系列知识 &#x1f384;感谢你的陪伴与支持 &#xff0c;故事既有了开头&#xff0c;就要画上一个完美的句号&#xff0c;让我们一起加油 目录 前言1.复习C文件IO相关操…

iOS - Runtime - Class的结构

文章目录 iOS - Runtime - Class的结构前言1. Class的结构1.1 Class的结构1.1.1 objc_class1.1.2 class_rw_t1.1.3 class_ro_t 1.2 class_rw_t和class_ro_t的区别1.3 class_rw_t和class_ro_t的关系1.3.1 分析关系1.3.2 原因 1.4 method_t1.4.1 Type Encoding1.4.2 types iOS - …

Web举例:防火墙二层,上下行连接交换机的主备备份组网

Web举例&#xff1a;防火墙二层&#xff0c;上下行连接交换机的主备备份组网 介绍了业务接口工作在二层&#xff0c;上下行连接交换机的主备备份组网的Web举例。 组网需求 如图1所示&#xff0c;两台FW的业务接口都工作在二层&#xff0c;上下行分别连接交换机。FW的上下行业…

代码随想录 day32 第八章 贪心算法 part02

● 122.买卖股票的最佳时机II ● 55. 跳跃游戏 ● 45.跳跃游戏II 122.买卖股票的最佳时机II 关联 leetcode 122.买卖股票的最佳时机II 思路 局部最优&#xff1a; 只收获每天的正利润全局最优 局部最优累计的最大利润当天卖了还可以用当天的价格买入 题解 func maxProfit…

安科瑞路灯安全用电云平台解决方案【电不起火、电不伤人】

背景介绍 近年来 &#xff0c;随着城市规模的不断扩大 &#xff0c;路灯事业蓬勃发展。但有的地方因为观念、技术、管理等方面不完善 &#xff0c;由此引发了一系列安全问题。路灯点多面广 &#xff0c;一旦漏电就极容易造成严重的人身安全事故。不仅给受害者家庭带来痛苦 &am…

[flask]session的基本使用

Cookie和Session的区别&#xff08;面试必备&#xff09;_cookie和session的作用和区别-CSDN博客 cooike和session都是用来跟踪浏览器用户身份的会话方式 ookie数据存放在客户的浏览器上&#xff0c;session数据放在服务器上 cooike相对于session来说的话&#xff0c;安全性没…

关于vite+vue3引入tailwind框架的正确方式

首先可以明确的知道,只按照官网的配置是会导致样式不加载或者加载不生效等问题的。正确的处理方案 1.首先按照官网的指示安装 npm install -D tailwindcss postcss autoprefixer npx tailwindcss init2.然后项目根目录创建postcss.config.js文件 module.exports = {plugins: …

【免费教程】创建元宇宙3D纪念馆、发布云祭扫3D模型的免费教程

免注册步骤如下&#xff1a; 1、下载html浏览器纯净版&#xff08;推荐电脑打开&#xff0c;网址&#xff1a;https://gitee.com/dtnsman/dtns/raw/master/release/dtns.connector-html.dist-2024-3-27-web.zip 2、切换至&#xff1a;dev00mansfast&#xff08;或qw&#xff…