vue使用 router 实现导航栏跳转

前置课程:

首先应该明白什么是 router 就是路由的意思,那什么是路由,路由就是控制不同 url 路径展示不同的内容,比如访问
localhost/home 打开的应该是主页;访问localhost/guangchuang显示的应该是广场相关的内容,就这是对路由的简单了解。

如何实现

  1. 在vue 项目创建后,安装路由插件,npm install router --save
  2. 运行项目,打开项目文件夹
  3. 接着在src 的目录下去创建一个router 的文件夹作为管理路由的入口。
  4. 然后在 router 文件夹下创建一个 index.js的文件,作为配置路由关键内容
  5. 接着在 main.js里导入这个 router 下的 index.js然后在 app 里挂载使用。
import router from './router' //写到 main.js里
createApp(App).use(router).mount('#app')

到这里基本的配置久结束了,然后开始配置 index.js文件

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
// 固定写法上面的
const routes = [ {path: '/',name: 'home',component: HomeView},{path: '/about',name: 'about',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')}
]
# 配置具体的路由信息
const router = createRouter({history: createWebHistory(process.env.BASE_URL),routes
})
// 然后创建路由,相关信息扔里面export default router
最后导出即可,这里导出是在 mainjs里导入使用的所以是一一对应的。

如何看到效果

  1. 在有了上面铺垫就可以在下面进行功能实现了。
  2. 我们在 src 创建view 视图的文件夹然后,创建俩组件到后面使用,内容随便。
  3. 然后在我们想要使用的页面,去写代码。在这之前我要介绍俩个标签。
<router-link to="/about">About</router-link>  
这是路由的标签,和 a 标签类似,to 的参数就是在 index.js 下的 router 
里配置的路径
<router-view/> // 这个标签是 路由展示的标签,有了这个标签,跳转的内容才会显示。

结尾梳理

Vue 3 项目使用 Vue Router 流程图

  1. 安装 Vue Router

    • 使用 npm 或 yarn 安装 vue-router@4
  2. 创建路由配置文件 index.js

    • src 目录下创建 router 文件夹
    • 创建 index.js 并定义路由
  3. main.js 中引用路由配置

    • 引入并使用路由配置
  4. 使用路由标签 <router-view><router-link>

    • 在组件模板中使用 <router-view> 展示组件
    • 使用 <router-link> 实现导航
  5. 运行项目

    • 使用 npm run serveyarn serve 启动项目

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

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

相关文章

curl发送邮件需要哪些参数设置?如何配置?

curl发送邮件有哪些认证方式&#xff1f;如何通过curl命令发信&#xff1f; curl是一个命令行工具&#xff0c;用于在网络上传输数据&#xff0c;包括发送电子邮件。要使用curl发送邮件&#xff0c;需要设置一些参数以确保邮件被正确发送到目标收件人。AokSend来介绍一些必需的…

【Unity】Animator动画倒播,与StartRecording动画录制

一、Animator动画倒播 正常我们修改速度&#xff0c;只需要修改Animator.speed即可&#xff0c;但如果设置为负值&#xff0c;Animator系统会自动将其改为0值。 1.创建动画速度参数 (1)设置动画 我们需要创建表示速度的动画参数Speed&#xff0c;将其付给需要倒播的动画片段…

改进位删除谜题的求解方法

问题背景 给定长度为 n 的二进制向量&#xff0c;如何删除恰好 n/3 个位&#xff0c;使剩余二进制向量的不同数量最小化。该问题被称为“位删除谜题”。 以下是该问题的示例&#xff1a; 对于 n 3 的情况&#xff0c;最优解是 2&#xff0c;对应两个不同的向量 11 和 00。对…

韩国裸机云站群服务器托管租用方案

随着网络技术的飞速发展&#xff0c;站群服务器在网站运营中扮演着越来越重要的角色。韩国裸机云站群服务器&#xff0c;以其独特的优势&#xff0c;如地理位置优越、价格相对较低、技术实力雄厚等&#xff0c;吸引了众多企业的关注。本文将为您详细介绍韩国裸机云站群服务器的…

如何快速翻译pdf英文论文(5分钟就可以翻译一篇几十页的英文论文)

一、问题&#xff1a;如何快速翻译pdf英文论文 二、解决方法&#xff1a; 可以通过下面三个在线翻译来进行翻译pdf文档 百度翻译有道翻译谷歌翻译 方法&#xff1a;以有道翻译为例&#xff0c;可以直接百度搜索有道在线翻译&#xff0c;然后点击文档翻译&#xff0c;将pdf文…

Python抓取天气信息

Python的详细学习还是需要些时间的。如果有其他语言经验的&#xff0c;可以暂时跟着我来写一个简单的例子。 2024年最新python教程全套&#xff0c;学完即可进大厂&#xff01;&#xff08;附全套视频 下载&#xff09; (qq.com) 我们计划抓取的数据&#xff1a;杭州的天气信息…

六、C#变量作用域

在 C# 中&#xff0c;变量的作用域定义了变量的可见性和生命周期。 变量的作用域通常由花括号 {} 定义的代码块来确定。 以下是关于C#变量作用域的一些基本规则&#xff1a; 局部变量 在方法、循环、条件语句等代码块内声明的变量是局部变量&#xff0c;它们只在声明它们的…

docker pull xxx拉取超时time out

文章目录 前言总结 前言 换了镜像源&#xff0c;改配置的都不行&#xff0c;弄了一个下午&#xff0c;最后运行一下最高指令就可以了 sudo docker_OPTS"--dns 8.8.8.8"总结 作者&#xff1a;加辣椒了吗&#xff1f; 简介&#xff1a;憨批大学生一枚&#xff0c;喜欢…

02-ES6新语法

1. ES6 Proxy与Reflect 1.1 概述 Proxy 与 Reflect 是 ES6 为了操作对象引入的 API 。 Proxy 可以对目标对象的读取、函数调用等操作进行拦截&#xff0c;然后进行操作处理。它不直接操作对象&#xff0c;而是像代理模式&#xff0c;通过对象的代理对象进行操作&#xff0c;…

JAVA8 常用Stram处理方法

JAVA8 常用Stram处理方法 排序排序对象集合属性一升序 属性二降序List转MapList分组求和提取字符串根据属性去重分组排序求和 排序 List<MachineOrderResponse.BackRecord> noSList ss.stream().sorted(Comparator.comparing(MachineOrderResponse.BackRecord::getTime)…

WEB3-众筹合约

构建众筹合约的框架&#xff0c;包括定义 IERC20 接口&#xff0c;并通过构造函数初始化代币合约。 By:HackQuesthttps://www.hackquest.io/zh

如何用Vue3和ApexCharts打造引人注目的3D径向条形图

本文由ScriptEcho平台提供技术支持 项目地址&#xff1a;传送门 使用 ApexCharts 构建美观的 Vue.js 径向条形图 应用场景 径向条形图是一种用于可视化单一数据点及其与目标或理想值的关系的图表类型。它在显示进度、完成率或其他类似度量时非常有用。 基本功能 这段代码…

同三维T80002JEHV H.265高清解码器

同三维T80002JEHV H.265高清解码器 1路HDMI1路VGA解码输出&#xff0c;1/2/4画面分割或16路轮询显示 产品简介&#xff1a; 同三维T80002JEHV解码器使用Linux系统&#xff0c;支持VGA/HDMI二种接口同时输出&#xff0c;支持多流输入多流解码及多屏显示&#xff0c;具有完善的…

【时序预测】-Transformer系列

Transformer 2017 NIPS 重点&#xff1a;Attention Is All You Need 核心&#xff1a;Attention Is All You Need Informer 2021 AAAI&#xff08;Best Paper&#xff09; 重点&#xff1a;Transformer Sparse attention &#xff08;稀疏&#xff09; 核心&#xff1a;S…

Django REST framework数据展示技巧:分页、过滤与搜索的实用配置与实践

系列文章目录 Django入门全攻略&#xff1a;从零搭建你的第一个Web项目Django ORM入门指南&#xff1a;从概念到实践&#xff0c;掌握模型创建、迁移与视图操作Django ORM实战&#xff1a;模型字段与元选项配置&#xff0c;以及链式过滤与QF查询详解Django ORM深度游&#xff1…

【修复Win11错误 0x80010135: 路径太长】

1. 问题现象&#xff1a; 一个意外错误使你无法复制该文件。如果你继续收到此错误&#xff0c;可以使用错误代码来搜索有关此问题的帮助。 错误 0x80010135: 路径太长 或者这样 2. 分析问题 造成这个问题的主要原因包括&#xff1a; 文件路径长度超过 260 个字符&#xf…

Qt利用Coin3D(OpenInventor)进行3d绘图

文章目录 1.安装1.1.下载coin3d1.2.下载quarter1.3.解压并合并 2.在Qt中使用3.画个网格4.加载wrl模型 1.安装 1.1.下载coin3d 首先&#xff0c;到官网下载[coin3d/coin] 我是Qt5.15.2vs2019的&#xff0c;因此我选择这个coin-4.0.2-msvc17-x64.zip 1.2.下载quarter 到官网…

Docker:现代软件开发的基石

在当今快速发展的科技世界中&#xff0c;Docker 已成为现代软件开发和部署的关键工具。作为一种开源平台&#xff0c;Docker 使开发者能够在容器中创建、部署和运行应用程序&#xff0c;从而极大地提高了开发效率和环境一致性。本文将深入探讨 Docker 的基本概念、主要优势及其…

【信息资源组织与管理】【开卷考】如何准备 期末考试复习必备

索引篇 先去xhs找了开卷考有什么准备技巧&#xff0c;来自Prozac ❗️首先&#xff0c;适用于考试范围为课本内容或者课堂内容&#xff0c;如果有那种拓展题&#xff0c;脱离课本的&#xff0c;那我就没办法了。 ✅一定要熟悉熟悉熟悉课本 1. 第一遍略看课本&#xff0c;可以不…

万界星空科技QMS质量管理介绍

产品的生产质量是企业发展之根本&#xff0c;对所有企业来说&#xff0c;建立完善质量控制体系&#xff0c;对企业生产经营以及发展竞争具有至关重要的影响&#xff0c;可以说是企业质量保证的防火墙。QMS质量管理系统对任何一家企业都具有重要意义&#xff0c;可帮助企业提高生…