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

学习和分享关于 Vue.js 的路由(vue-router)

学习和分享关于 Vue.js 的路由(vue-router)是一个非常有价值的主题,因为路由是构建单页应用程序(SPA)的核心部分。本文将介绍 Vue.js 路由的基本概念和实现,并展示一个典型的项目目录结构。

目录

    • Vue.js 路由简介
    • 目录结构
      • 关键文件和文件夹
    • 实现基本的路由
      • 1. 安装 Vue Router
      • 2. 配置路由
      • 3. 创建视图组件
      • 4. 修改 `main.js`
      • 5. 更新根组件 `App.vue`
      • 6. 启动开发服务器

Vue.js 路由简介

Vue Router 是 Vue.js 官方的路由管理器,允许我们在 Vue 应用中实现客户端路由。它使我们可以创建多个页面或视图,并在用户导航时保持单页应用程序的感觉。

目录结构

一个典型的 Vue.js 项目目录结构(包括 Vue Router)如下所示:

my-vue-app/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── assets/
│   ├── components/
│   │   ├── Home.vue
│   │   ├── About.vue
│   │   └── ...
│   ├── router/
│   │   └── index.js
│   ├── views/
│   │   ├── HomeView.vue
│   │   ├── AboutView.vue
│   │   └── ...
│   ├── App.vue
│   ├── main.js
│   └── ...
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
└── vue.config.js

关键文件和文件夹

  • public/:包含静态文件,如 index.html
  • src/:包含源代码。
    • assets/:存放静态资源(如图片、字体等)。
    • components/:存放 Vue 组件。
    • router/:存放路由配置文件。
      • index.js:定义路由和路由规则。
    • views/:存放视图组件(通常是页面级组件)。
    • App.vue:根组件。
    • main.js:入口文件,初始化 Vue 实例并挂载到 DOM。

实现基本的路由

下面是实现基本路由的步骤:

1. 安装 Vue Router

首先,需要安装 Vue Router:

npm install vue-router

2. 配置路由

创建并配置路由文件 src/router/index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import HomeView from '../views/HomeView.vue';
import AboutView from '../views/AboutView.vue';Vue.use(VueRouter);const routes = [{path: '/',name: 'Home',component: HomeView},{path: '/about',name: 'About',component: AboutView}
];const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
});export default router;

3. 创建视图组件

src/views/ 目录下创建视图组件 HomeView.vueAboutView.vue

HomeView.vue

<template><div><h1>Home Page</h1><p>Welcome to the home page.</p></div>
</template><script>
export default {name: 'HomeView'
};
</script><style scoped>
/* Add your styles here */
</style>

AboutView.vue

<template><div><h1>About Page</h1><p>This is the about page.</p></div>
</template><script>
export default {name: 'AboutView'
};
</script><style scoped>
/* Add your styles here */
</style>

4. 修改 main.js

src/main.js 中引入并使用路由:

import Vue from 'vue';
import App from './App.vue';
import router from './router';Vue.config.productionTip = false;new Vue({router,render: h => h(App)
}).$mount('#app');

5. 更新根组件 App.vue

修改 src/App.vue 以包含路由视图和导航链接:

<template><div id="app"><nav><router-link to="/">Home</router-link><router-link to="/about">About</router-link></nav><router-view/></div>
</template><script>
export default {name: 'App'
};
</script><style>
/* Add your styles here */
</style>

6. 启动开发服务器

最后,启动开发服务器并查看效果:

npm run serve

打开浏览器访问 http://localhost:8080,你应该能够看到首页和关于页面,并可以通过导航链接在它们之间切换。


通过这些步骤,你已经创建了一个包含 Vue Router 的基本 Vue.js 应用程序。你可以根据需要添加更多的路由和组件,以构建更加复杂和功能丰富的应用。希望这篇文章能帮助你快速入门并分享 Vue.js 路由的知识。

相关文章:

学习和分享关于 Vue.js 的路由(vue-router)

学习和分享关于 Vue.js 的路由&#xff08;vue-router&#xff09;是一个非常有价值的主题&#xff0c;因为路由是构建单页应用程序&#xff08;SPA&#xff09;的核心部分。本文将介绍 Vue.js 路由的基本概念和实现&#xff0c;并展示一个典型的项目目录结构。 目录 Vue.js 路…...

小猪APP分发:一站式免费应用推广解决方案

在竞争激烈的移动应用市场中&#xff0c;寻找一个高效且成本友好的方式来推广自己的应用程序&#xff0c;成为了众多开发者面临的共同挑战。幸运的是&#xff0c;像"小猪APP分发www.appzhu.cn"这样的平台应运而生&#xff0c;为开发者提供了一个全面、免费的应用分发…...

新抖:抖音的数据分析平台,敢用深色系,别的真不敢!

举报 评论 0...

独享IP是原生IP吗?二者有何区别?

原生IP&#xff1a; 原生IP是指由Internet服务提供商&#xff08;ISP&#xff09;直接分配给用户的IP地址&#xff0c;这些IP地址通常反映了用户的实际地理位置和网络连接。原生IP是用户在其所在地区或国家使用的真实IP地址&#xff0c;与用户的物理位置直接相关。在跨境电商中…...

AI大模型探索之路-实战篇7:Function Calling技术实战:自动生成函数

系列篇章&#x1f4a5; AI大模型探索之路-实战篇4&#xff1a;深入DB-GPT数据应用开发框架调研 AI大模型探索之路-实战篇5&#xff1a;探索Open Interpreter开放代码解释器调研 AI大模型探索之路-实战篇6&#xff1a;掌握Function Calling的详细流程 目录 系列篇章&#x1f4a…...

Android14 - 绘制系统 - 概览

从Android 12开始&#xff0c;Android的绘制系统有结构性变化&#xff0c; 在绘制的生产消费者模式中&#xff0c;新增BLASTBufferQueue&#xff0c;客户端进程自行进行queue的生产和消费&#xff0c;随后通过Transation提交到SurfaceFlinger&#xff0c;如此可以使得各进程将缓…...

Add object from object library 从对象库中添加内置器件

Add object from object library 从对象库中添加内置器件 正文正文 对于 Lumerical,有些时候我们在使用中,可能需要从 Object library 中添加器件,通常我们的做法是手动添加。如下图所示,我们添加一个 Directional Coupler 到我们的工程文件中: 但是这种操作方式不够智能…...

天诚公租房/人才公寓WiFi人脸识别物联网智能门锁解决方案

人才是引领城市高质量发展的重要因素&#xff0c;城市要想吸纳人才的保障便是人才公寓。近年来&#xff0c;全国各地一二三线城市都在大力建设人才公寓&#xff0c;集聚菁英人才&#xff0c;倾力打造人才高地。 一、人才公寓如火如荼建设 2023年底&#xff0c;山东德州提出三年…...

JAVA学习-练习试用Java实现“子集”

问题&#xff1a; 给定一个整数数组 nums&#xff0c;数组中的元素互不相同。返回该数组所有可能的子集&#xff08;幂集&#xff09;。解集不能包含重复的子集。可以按任意顺序返回解集。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[],[1],[2],[…...

揭秘《庆余年算法番外篇》:范闲如何使用维吉尼亚密码解密二皇子密信

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容&#xff0c;和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣&#xff01; 推荐&#xff1a;数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航&#xff1a; LeetCode解锁100…...

Java进阶学习笔记11——多态

什么是多态&#xff1f; 多态是在继承/实现情况下一种现象&#xff0c;表现为&#xff1a;对象多态和行为多态。 同一个对象&#xff0c;在不同时刻表现出来的不同形态。 多态的前提&#xff1a; 要有继承/实现关系 要有方法的重写 要有父类引用指向子类对象。 多态的具体代码…...

注意力机制篇 | YOLOv8改进之引入用于目标检测的混合局部通道注意力MLCA

前言:Hello大家好,我是小哥谈。注意力机制是可以帮助神经网络突出重要元素,抑制无关元素。然而,绝大多数通道注意力机制只包含通道特征信息,忽略了空间特征信息,导致模型表示效果或目标检测性能较差,且空间注意模块往往较为复杂。为了在性能和复杂性之间取得平衡,本文提…...

百度生成数据库

问题1&#xff1a; 帮我创建2个表student与score表&#xff0c;要求student表有id,createDate,userName,phone,age,sex,introduce&#xff0c; 要求score表有id,scoreName,result,studentId(student表的id外键)。 要求student表中插入5条学生信息&#xff0c;都要是中文的。 要…...

【SpringBoot】整合百度文字识别

流程图 一、前期准备 1.1 打开百度智能云官网找到管理中心创建应用 全选文字识别 1.2 保存好AppId、API Key和Secret Key 1.3 找到通用场景文字识别&#xff0c;立即使用 1.4 根据自己需要&#xff0c;选择要开通的项目 二、代码编写 以通用文字识别&#xff08;高精度版&am…...

Java如何设计一个功能

流程说明:实现一组功能的步骤 1,充分了解需求,包括所有的细节,需要知道要做一个什么样的功能。 2,设计实体/表 正向工程:设计实体、映射文件 --> 建表 反向工程:设计表 --> 映射文件、实体 设计实体类型分析步骤&#xff1a; 1&#xff09;功能模块有几个实体…...

MySQL 字符字段长度设置详解:语法、注意事项和示例

本文将详细介绍在 MySQL 数据库中如何设置字符字段的长度。将介绍字符字段的数据类型、长度限制、语法示例&#xff0c;并提供具体的示例&#xff0c;以正确设置和管理字符字段的长度。 1. MySQL 字符字段长度概述 在 MySQL 中&#xff0c;字符字段是用于存储文本型数据的列。…...

【对角线遍历】python

没啥思路 class Solution:def findDiagonalOrder(self, mat: List[List[int]]) -> List[int]:mlen(mat)nlen(mat[0])ret[]if len(mat)0:return retcount0#mn-1是对角线总数while count<mn-1:#x和y的和刚好是count数#偶数为右上走if count%20:xcount if(count<m)else (…...

温度检测小系统兼继电器模块和小风扇

1.思路&#xff1a; 代码还要封装&#xff01; 延迟1秒&#xff1b;串口初始化&#xff1b;LCD1602显示屏初始化&#xff1b;延迟两秒&#xff1b;ledone不亮&#xff1b; while循环&#xff0c;延迟1秒&#xff0c;DHT模块读取数据&#xff1b;封装接收数据函数&#xff1b;发…...

[数据结构1.0]计数排序

读者老爷好&#xff0c;本鼠鼠最近学了计数排序&#xff0c;浅浅介绍一下&#xff01; 目录 1.统计相同元素出现次数 2.根据统计的结果将序列回填到原来的序列中 3.相对映射计数排序 计数排序又称为鸽巢原理&#xff0c;是对哈希直接定址法的变形应用&#xff0c;是非比较排…...

PostgreSQL入门教程

PostgreSQL是一种开源的关系型数据库管理系统&#xff0c;它具有高度的可靠性、可扩展性和性能。下面是一个简单的PostgreSQL入门教程&#xff0c;帮助你开始使用这个强大的数据库管理系统。 步骤1&#xff1a;安装PostgreSQL 首先&#xff0c;你需要下载并安装PostgreSQL。你…...

Android Wi-Fi 连接失败日志分析

1. Android wifi 关键日志总结 (1) Wi-Fi 断开 (CTRL-EVENT-DISCONNECTED reason3) 日志相关部分&#xff1a; 06-05 10:48:40.987 943 943 I wpa_supplicant: wlan0: CTRL-EVENT-DISCONNECTED bssid44:9b:c1:57:a8:90 reason3 locally_generated1解析&#xff1a; CTR…...

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…...

成都鼎讯硬核科技!雷达目标与干扰模拟器,以卓越性能制胜电磁频谱战

在现代战争中&#xff0c;电磁频谱已成为继陆、海、空、天之后的 “第五维战场”&#xff0c;雷达作为电磁频谱领域的关键装备&#xff0c;其干扰与抗干扰能力的较量&#xff0c;直接影响着战争的胜负走向。由成都鼎讯科技匠心打造的雷达目标与干扰模拟器&#xff0c;凭借数字射…...

如何更改默认 Crontab 编辑器 ?

在 Linux 领域中&#xff0c;crontab 是您可能经常遇到的一个术语。这个实用程序在类 unix 操作系统上可用&#xff0c;用于调度在预定义时间和间隔自动执行的任务。这对管理员和高级用户非常有益&#xff0c;允许他们自动执行各种系统任务。 编辑 Crontab 文件通常使用文本编…...

LangFlow技术架构分析

&#x1f527; LangFlow 的可视化技术栈 前端节点编辑器 底层框架&#xff1a;基于 &#xff08;一个现代化的 React 节点绘图库&#xff09; 功能&#xff1a; 拖拽式构建 LangGraph 状态机 实时连线定义节点依赖关系 可视化调试循环和分支逻辑 与 LangGraph 的深…...

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...

验证redis数据结构

一、功能验证 1.验证redis的数据结构&#xff08;如字符串、列表、哈希、集合、有序集合等&#xff09;是否按照预期工作。 2、常见的数据结构验证方法&#xff1a; ①字符串&#xff08;string&#xff09; 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...

Java中HashMap底层原理深度解析:从数据结构到红黑树优化

一、HashMap概述与核心特性 HashMap作为Java集合框架中最常用的数据结构之一&#xff0c;是基于哈希表的Map接口非同步实现。它允许使用null键和null值&#xff08;但只能有一个null键&#xff09;&#xff0c;并且不保证映射顺序的恒久不变。与Hashtable相比&#xff0c;Hash…...

大模型真的像人一样“思考”和“理解”吗?​

Yann LeCun 新研究的核心探讨&#xff1a;大语言模型&#xff08;LLM&#xff09;的“理解”和“思考”方式与人类认知的根本差异。 核心问题&#xff1a;大模型真的像人一样“思考”和“理解”吗&#xff1f; 人类的思考方式&#xff1a; 你的大脑是个超级整理师。面对海量信…...

【工具教程】多个条形码识别用条码内容对图片重命名,批量PDF条形码识别后用条码内容批量改名,使用教程及注意事项

一、条形码识别改名使用教程 打开软件并选择处理模式&#xff1a;打开软件后&#xff0c;根据要处理的文件类型&#xff0c;选择 “图片识别模式” 或 “PDF 识别模式”。如果是处理包含条形码的 PDF 文件&#xff0c;就选择 “PDF 识别模式”&#xff1b;若是处理图片文件&…...