当前位置: 首页 > 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。你…...

React Native 导航系统实战(React Navigation)

导航系统实战&#xff08;React Navigation&#xff09; React Navigation 是 React Native 应用中最常用的导航库之一&#xff0c;它提供了多种导航模式&#xff0c;如堆栈导航&#xff08;Stack Navigator&#xff09;、标签导航&#xff08;Tab Navigator&#xff09;和抽屉…...

论文浅尝 | 基于判别指令微调生成式大语言模型的知识图谱补全方法(ISWC2024)

笔记整理&#xff1a;刘治强&#xff0c;浙江大学硕士生&#xff0c;研究方向为知识图谱表示学习&#xff0c;大语言模型 论文链接&#xff1a;http://arxiv.org/abs/2407.16127 发表会议&#xff1a;ISWC 2024 1. 动机 传统的知识图谱补全&#xff08;KGC&#xff09;模型通过…...

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

优选算法第十二讲:队列 + 宽搜 优先级队列

优选算法第十二讲&#xff1a;队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据

微软PowerBI考试 PL300-在 Power BI 中清理、转换和加载数据 Power Query 具有大量专门帮助您清理和准备数据以供分析的功能。 您将了解如何简化复杂模型、更改数据类型、重命名对象和透视数据。 您还将了解如何分析列&#xff0c;以便知晓哪些列包含有价值的数据&#xff0c;…...

【JVM面试篇】高频八股汇总——类加载和类加载器

目录 1. 讲一下类加载过程&#xff1f; 2. Java创建对象的过程&#xff1f; 3. 对象的生命周期&#xff1f; 4. 类加载器有哪些&#xff1f; 5. 双亲委派模型的作用&#xff08;好处&#xff09;&#xff1f; 6. 讲一下类的加载和双亲委派原则&#xff1f; 7. 双亲委派模…...

基于PHP的连锁酒店管理系统

有需要请加文章底部Q哦 可远程调试 基于PHP的连锁酒店管理系统 一 介绍 连锁酒店管理系统基于原生PHP开发&#xff0c;数据库mysql&#xff0c;前端bootstrap。系统角色分为用户和管理员。 技术栈 phpmysqlbootstrapphpstudyvscode 二 功能 用户 1 注册/登录/注销 2 个人中…...

水泥厂自动化升级利器:Devicenet转Modbus rtu协议转换网关

在水泥厂的生产流程中&#xff0c;工业自动化网关起着至关重要的作用&#xff0c;尤其是JH-DVN-RTU疆鸿智能Devicenet转Modbus rtu协议转换网关&#xff0c;为水泥厂实现高效生产与精准控制提供了有力支持。 水泥厂设备众多&#xff0c;其中不少设备采用Devicenet协议。Devicen…...

ubuntu22.04 安装docker 和docker-compose

首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...

字符串哈希+KMP

P10468 兔子与兔子 #include<bits/stdc.h> using namespace std; typedef unsigned long long ull; const int N 1000010; ull a[N], pw[N]; int n; ull gethash(int l, int r){return a[r] - a[l - 1] * pw[r - l 1]; } signed main(){ios::sync_with_stdio(false), …...