Vue组件学习 | 一、 Router组件

各位程序员1024节日快乐~

Vue Router 是 Vue.js 的官方路由管理器,它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得简单。以下是 Vue Router 的基本用法

Vue Router 基本用法

安装 Vue Router

首先,你需要安装 Vue Router。如果你使用的是 npm,可以使用以下命令:

npm install vue-router

创建 Router 实例

在你的 Vue 应用中,你需要创建一个 Vue Router 实例,并定义路由。

// 导入 Vue 和 Vue Router
import Vue from 'vue'
import VueRouter from 'vue-router'// 告诉 Vue 使用 Vue Router
Vue.use(VueRouter)// 定义路由组件
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }// 创建路由配置
const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
]// 创建 router 实例
const router = new VueRouter({routes // (缩写)相当于 routes: routes
})

在 Vue 实例中使用 Router

将 router 实例传递给 Vue 实例。

const app = new Vue({router,template: `<div id="app"><h1>Hello, Vue Router!</h1><ul><li><router-link to="/">Home</router-link></li><li><router-link to="/about">About</router-link></li></ul><router-view></router-view></div>`
})

路由组件

路由组件是 Vue 组件,但它们是由 Vue Router 管理的。你可以在 <router-view> 元素中渲染路由组件。

路由参数

你可以在路由配置中定义参数:

const routes = [{ path: '/user/:id', component: User }
]

然后在组件中通过 this.$route.params 访问参数:

export default {data() {return {user: null}},created() {this.user = this.$route.params.id}
}

路由导航

你可以使用 <router-link> 组件来创建导航链接,或者使用编程式导航:

<!-- 使用 <router-link> 创建导航链接 -->
<router-link to="/about">About</router-link>
// 编程式导航
this.$router.push('/about')

路由守卫

Vue Router 允许你在路由发生变化之前或之后执行逻辑,称为路由守卫。

const router = new VueRouter({routes,beforeEach: (to, from, next) => {// 在这里执行检查,然后调用 next()next()}
})

路由懒加载

为了减小应用的加载时间,你可以使用路由懒加载:

const router = new VueRouter({routes: [{ path: '/foo', component: () => import('./Foo.vue') }]
})

以上就是 Vue Router 的基本用法。

你可以在 Vue Router 官方文档 中找到更多高级用法和配置选项。

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

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

相关文章

【移动应用开发】界面设计(二)实现水果列表页面

续上一篇博客 【移动应用开发】界面设计&#xff08;一&#xff09;实现登录页面-CSDN博客 目录 一、采用ViewBinding实现一个RecyclerView 1.1 在app/build.gradle中添加recyclerview依赖&#xff0c;并打开viewBinding &#xff08;1&#xff09;在app/build.gradle中添加…

Servlet(三)-------Cookie和session

一.Cookie和Session Cookie和Session都是用于在Web应用中跟踪用户状态的技术。Cookie是存储在用户浏览器中的小文本文件&#xff0c;由服务器发送给浏览器。当用户再次访问同一网站时&#xff0c;浏览器会把Cookie信息发送回服务器。例如&#xff0c;网站可以利用Cookie记住用…

java 17天 TreeSet以及Collections

SortedSet TreeSet Collections 所有单值集合 1 SortedSet 特点&#xff1a;有序 唯一 实现类&#xff1a;TreeSet 利用TreeSet特有的对数据进行升序&#xff0c;再放到ArryList进行for下标倒序打印&#xff0c;或者利用自身的pollLast&#xff08;&#xff09;取出最后元…

金融工程--pine-script 入门

背景 脚本基本组成 策略实现 实现马丁格尔策略 初始化变量&#xff1a;定义初始资本、初始头寸大小、止损百分比、止盈百分比以及当前资本和当前头寸大小等变量。 更新头寸&#xff1a;创建一个函数来更新头寸大小、止损价格和止盈价格。在马丁格尔策略中&#xff0c;每次亏…

如何在算家云搭建GPT-SOVITS(语音转换)

一、模型介绍 GPT-SOVITS是一款强大的小样本语音转换和文本转语音 WebUI工具。它集成了声音伴奏分离、自动训练集分割、中文ASR和文本标注等辅助工具。 具有以下特征&#xff1a; 零样本 TTS&#xff1a; 输入 5 秒的声音样本并体验即时文本到语音的转换。少量样本 TTS&…

micro-app【微前端实战】主应用 vue3 + vite 子应用 vue3+vite

micro-app 官方文档为 https://micro-zoe.github.io/micro-app/docs.html#/zh-cn/framework/vite 子应用 无需任何修改&#xff0c;直接启动子应用即可。 主应用 1. 安装微前端框架 microApp npm i micro-zoe/micro-app --save2. 导入并启用微前端框架 microApp src/main.ts …

智联招聘×Milvus:向量召回技术提升招聘匹配效率

01. 业务背景 在智联招聘平台&#xff0c;求职者和招聘者之间的高效匹配至关重要。招聘者可以发布职位寻找合适的人才&#xff0c;求职者则通过上传简历寻找合适的工作。在这种复杂的场景中&#xff0c;我们的核心目标是为双方提供精准的匹配结果。在搜索推荐场景下&#xff0c…

leetcode-75-颜色分类

题解&#xff08;方案二&#xff09;&#xff1a; 1、初始化变量n0&#xff0c;代表数组nums中0的个数&#xff1b; 2、初始化变量n1&#xff0c;代表数组nums中0和1的个数&#xff1b; 3、遍历数组nums&#xff0c;首先将每个元素赋值为2&#xff0c;然后对该元素进行判断统…

druid 连接池监控报错 Sorry, you are not permitted to view this page.本地可以,发布正式出错

简介&#xff1a; druid 连接池监控报错 Sorry, you are not permitted to view this page. 使用Druid连接池的时候&#xff0c;遇到一个奇怪的问题&#xff0c;在本地&#xff08;localhost&#xff09;可以直接打开Druid连接池监控&#xff0c;在其他机器上打开会报错&#…

计数问题[NOIP2013]

题目描述 试计算在区间 1 到 n 的所有整数中&#xff0c;数字 x&#xff08;0≤x≤9&#xff09;共出现了多少次&#xff1f;例如&#xff0c;在 1 到 11 中&#xff0c;即在 1,2,3,4,5,6,7,8,9,10,11 中&#xff0c;数字 1 出现了 4 次。 输入格式 2 个整数 n,x&#xff0c;之…

【开源项目】经典开源项目数字孪生工地——开源工程及源码

飞渡科技数字孪生工地管理平台&#xff0c;以物联网、移动互联网技术为基础&#xff0c;充分应用人工智能等信息技术&#xff0c;通过AI赋能建筑行业&#xff0c;对住建项目内人员、车辆、安全、设备、材料等进行智能化管理&#xff0c;实现工地现场生产作业协调、智能处理和科…

sortablejs(前端拖拽排序的实现)

源文档&#xff1a;sortablejs - npm 安装 npm install sortablejs --save 引入项目 import Sortable from sortablejs; 使用示例 <template><ul id"items"><li>item 1</li><li>item 2</li><li>item 3</li>&l…

【JavaEE】【多线程】单例模式

目录 一、设计模式1.1 单例模式1.1.1 饿汉模式1.1.2 懒汉模式 1.2 线程安全问题1.3 懒汉模式线程安全问题的解决方法1.3.1 原子性问题解决1.3.2 解决效率问题1.3.3 解决内存可见性问题和指令重排序问题 一、设计模式 在讲解案例前&#xff0c;先介绍一个概念设计模式&#xff…

stm32入门教程--ADC模拟-数字转换器

ADC&#xff08;Analog-Digital Converter&#xff09;模拟-数字转换器 ADC可以将引脚上连续变化的模拟电压转你换位内存中存储的数字变量&#xff0c;建立模拟电路到数字电路的桥梁。 12位逐次逼近型ADC&#xff0c;1us转换时间 输入电压范围&#xff1a;0-3.3V转换结果范围…

Pyramidal Flow使用指南:快手、北大、北邮,开源可免费商用视频生成模型,快速上手教程

什么是 Pyramidal Flow&#xff1f; Pyramidal Flow 是由快手科技、北京大学和北京邮电大学联合推出的开源视频生成模型&#xff0c;它是完全开源的&#xff0c;发布在 MIT 许可证下&#xff0c;允许商业使用、修改和再分发。该模型能够通过文本描述生成最高10秒、分辨率为128…

Docker搭建开源Web云桌面操作系统Puter和DaedalOS

文章目录 Puter 操作系统说明基于 Docker 启动 Puter 操作系统拉取镜像运行容器基于 Docker-Compose 启动 Puter操作系统创建目录编写docker-compose.yml运行在本地直接运行puter操作系统puter界面截图puter个人使用总结构建自己的Puter镜像daedalos基于web的操作系统说明技术特…

Embedding 模型和Model 批量推理和多卡部署

批量推理 多卡部署 使用huggingface 【AI大模型】Transformers大模型库&#xff08;七&#xff09;&#xff1a;单机多卡推理之device_map_transformers多卡推理-CSDN博客 首先用 CUDA_VISIBLE_DEVICES1,2,3 python 或者os.environ["CUDA_VISIBLE_DEVICES"] &q…

风力发电场的“守护神”

摘要&#xff1a;作为清洁能源之一&#xff0c;风力发电场近几年装机容量快速增长。8月17日&#xff0c;国家能源局发布1-7月份全国电力工业统计数据。截至7月底&#xff0c;全国累计发电装机容量约27.4亿千瓦&#xff0c;同比增长11.5%。其中&#xff0c;太阳能发电装机容量约…

【Flutter】基础入门:Widgets

在 Flutter 中&#xff0c;Widget 是应用程序构建块的基础。几乎所有的对象都是一个 Widget&#xff0c;不论是显示在屏幕上的 UI 元素&#xff0c;还是一些功能性组件&#xff08;例如用于手势检测的 GestureDetector&#xff0c;或用于传递应用主题数据的 Theme&#xff09;&…

TCP simultaneous open测试

源代码 /*************************************************************************> File Name: common.h> Author: hsz> Brief:> Created Time: 2024年10月23日 星期三 09时47分51秒**********************************************************************…