Vue---router实现路由跳转

Vue—router实现路由跳转

目录

  • Vue---router实现路由跳转
    • 基本使用
    • 路由跳转
      • html实现路由跳转
      • JS实现路由跳转

基本使用

所谓路由,就是将一个个组件映射到不同的路由url中

首先要将App内的内容换成router-view

// App.vue
<template><div id="app"><router-view></router-view></div>
</template>
<script>
export default {data() {return {}},components:{}
}
</script>
  • 这个意思是router-view这部分以后都会以路由组件生效

现在去注册路由,还是以上面的Active组件为例

打开src/router/index.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'
import Active from '@/components/Active.vue'Vue.use(VueRouter)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')},{path: '/active',name: 'active',component: Active},
]const router = new VueRouter({mode: 'history',base: process.env.BASE_URL,routes
})export default router
  • import Active from '@/components/Active.vue'导入Active
  • path: '/active':浏览器通过访问这个路径来显示这个组件
  • name: 'active':组件名
  • component: Active:传入组件

image-20240429192729299

import Active from '@/components/Active.vue'导入Active

  • path: '/active':浏览器通过访问这个路径来显示这个组件
  • name: 'active':组件名
  • component: Active:传入组件

现在访问active路径就可以显示Active组件了

路由跳转

核心代码为<router-link to=""></router-link>

而跳转的路径要以router/index.js中的path为准

html实现路由跳转

<router-link to="/home"><button>点我跳转至home</button>
</router-link>

JS实现路由跳转

toHome(){this.$router.push('/home')
}

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

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

相关文章

区间预测 | PSO-RF-KDE的粒子群优化随机森林结合核密度估计多变量回归区间预测(Matlab)

区间预测 | PSO-RF-KDE的粒子群优化随机森林结合核密度估计多变量回归区间预测&#xff08;Matlab&#xff09; 目录 区间预测 | PSO-RF-KDE的粒子群优化随机森林结合核密度估计多变量回归区间预测&#xff08;Matlab&#xff09;效果一览基本介绍程序设计参考资料 效果一览 基…

【八股】UML 2的基础结构和上层结构

UML&#xff08;统一建模语言&#xff09;是一种广泛使用的建模语言&#xff0c;用于软件工程中的系统设计。UML 2是UML的一个重要版本&#xff0c;它扩展了原有的功能&#xff0c;提供了更加丰富和灵活的建模能力。UML 2的结构可以分为两部分&#xff1a;基础结构&#xff08;…

C++ //练习 14.8 你在7.5.1节的练习7.40(第261页)中曾经选择并编写了一个类,为它定义一个输出运算符。

C Primer&#xff08;第5版&#xff09; 练习 14.8 练习 14.8 你在7.5.1节的练习7.40&#xff08;第261页&#xff09;中曾经选择并编写了一个类&#xff0c;为它定义一个输出运算符。 环境&#xff1a;Linux Ubuntu&#xff08;云服务器&#xff09; 工具&#xff1a;vim 代…

WPF中Nlog的使用--能够提取Nlog的日志内容,并定义使用

背景 使用Nlog日志进行本地文件输出,以及进行定时清理删除参考其他文章 在用户本地计算机上进行Nlog输出,或者使用Web的Http的Post请求输出到后端数据库使用File或者Web的数据类型就可以了,但是我这里希望把我的日志进行输出到自己的云端,但是存在如下情况: 1、用户在一天…

孩子多大可以学编程,需要具备哪些基础知识?

孩子学习编程的最佳年龄取决于孩子的兴趣和学习能力。一般来说&#xff0c;孩子从5岁开始就可以接触编程教育&#xff0c;但更多的孩子在7到12岁之间开始学习编程。这个年龄段的孩子通常具有较好的逻辑思维能力和抽象思维能力&#xff0c;更容易理解编程的概念。 要学习编程&a…

巧用 TiCDC Syncpiont 构建银行实时交易和准实时计算一体化架构

本文阐述了某商业银行如何利用 TiCDC Syncpoint 功能&#xff0c;在 TiDB 平台上构建一个既能处理实时交易又能进行准实时计算的一体化架构&#xff0c;用以优化其零售资格业务系统的实践。通过迁移到 TiDB 并巧妙应用 Syncpoint&#xff0c;该银行成功解决了原有多个 MySQL 集…

图搜索算法详解与示例代码

在计算机科学领域&#xff0c;图搜索算法是一类用于在图数据结构中查找特定节点或路径的算法。图搜索算法在许多领域都有着广泛的应用&#xff0c;包括网络路由、社交网络分析、游戏开发等。本文将详细介绍几种常见的图搜索算法&#xff0c;包括深度优先搜索&#xff08;DFS&am…

模方试用版水面修整,调整水岸线功能进程缓慢该怎么解决?

答&#xff1a;水面修整&#xff0c;第一个点选取准确的高程位置和水边&#xff0c;其他点就可以包含整个水面范围就行&#xff0c;可以绘制大一些。上图绘制区域没有包含到所有的水面&#xff0c;可以尝试下图的红线绘制区域。 模方是一款针对实景三维模型的冗余碎片、水面残缺…

【ARM 常见汇编指令学习 6.1 - armv8 乘加指令 madd详细介绍】

请阅读【嵌入式开发学习必备专栏 】 文章目录 armv8 乘加指令 madd使用场景示例注意事项 armv8 乘加指令 madd 在ARMv8架构中&#xff0c;madd指令是一种乘加指令&#xff0c;用于执行两个数的乘法操作&#xff0c;并将结果与第三个数相加。madd指令是“Multiply-Add”的缩写&…

CentOS系统如何设置系统默认语言以及命令行输出的语言为英文? locale

要点 locale是地区相关&#xff1a;The locale command displays information about the current locale, or all locales, on standard output.通过全局变量进行配置&#xff0c;后台应该有程序读取环境变脸后进行输出确认。全局变量包括LANG和LC_ALL系统启动后首先初次读取/…

【Spring 】Spring MVC 入门Ⅱ

Spring MVC 入门Ⅱ 一、接收Cookie / Session 这两者都是用来保存用户信息的&#xff0c;但不同的是&#xff1a; Cookie存在客户端 Session存在服务器 Session产生时会生成一个唯一性的SessionID&#xff0c;这个SessionID可以用于匹配Session和Cookie SessionID可以在Cooki…

模型训练中的过拟合和欠拟合

基本概念 我们知道&#xff0c;所谓的神经网络其实就是一个复杂的非线性函数&#xff0c;网络越深&#xff0c;这个函数就越复杂&#xff0c;相应的表达能力也就越强&#xff0c;神经网络的训练则是一个拟合的过程。   当模型的复杂度小于真实数据的复杂度&#xff0c;模型表…

python中的进程线程和协程

目录 进程&#xff08;Process&#xff09;多进程代码实例 线程&#xff08;Thread&#xff09;多线程存在原因及其缺点多线程代码实例 协程&#xff08;Coroutine&#xff09;协程的优点协程代码实例 进程、线程和协程适合的任务性质和环境多进程更适合的场景多线程更适合的场…

智能优化算法--计算重复运行50次的最大值、最小值、均值、标准差

⚠申明&#xff1a; 未经许可&#xff0c;禁止以任何形式转载&#xff0c;若要引用&#xff0c;请标注链接地址。 全文共计3077字&#xff0c;阅读大概需要3分钟 &#x1f308;更多学习内容&#xff0c; 欢迎&#x1f44f;关注&#x1f440;【文末】我的个人微信公众号&#xf…

【ARM Cache 系列文章 11 -- ARM Cache 直接映射 详细介绍】

请阅读【ARM Cache 系列文章专栏导读】 文章目录 ARM Cache组织形式直接映射(Direct Mapped)直接映射示例直接映射原理Cache颠簸(cache thrashing)原因文章:【ARM Cache 系列文章 11.1 – ARM Cache 全相连 详细介绍】 文章:【ARM Cache 系列文章 11.2 – ARM Cache 组相…

在Android中,如何通过Kotlin协程处理多个API调用

在Android中&#xff0c;如何通过Kotlin协程处理多个API调用 在Android开发中&#xff0c;如何使用Kotlin协程处理多个API调用的示例呢&#xff1f;假设我们已经对Kotlin协程有了一定的了解&#xff0c;包括定义、简单用例和示例等。现在&#xff0c;让我们来看一些真实的Andr…

Tokitsukaze and Average of Substring

原题链接&#xff1a;登录—专业IT笔试面试备考平台_牛客网 目录 1. 题目描述 2. 思路分析 3. 代码实现 1. 题目描述 2. 思路分析 前缀和。 开一个int类型的前缀和数组pre[30][N]&#xff08;pre[i][j]表示某字符转成的数字 i 在一段区间的前缀个数。因为字母表有‘a’~z…

带你学C语言:结构体及其内存

目录 &#x1f37a;0.前言 ✍1.结构体 &#x1f440;1.1为何结构体 &#x1f440;1.2结构体怎么声明 &#x1f440;1.3结构体怎么创建 &#x1f440;1.4结构体初始化与访问 ✋1.5匿名结构体问题 &#x1f646;1.6结构体的自我调用 &#x1f69d; 2.结构体的内存对齐 &a…

【数据结构】时间复杂度和空间复杂度解析

数据结构前言&#xff1a; 1. 什么是数据结构 打个比方来说不同的数据就相当于不同的书籍&#xff0c;我们经常在图书馆可以看到不同类别的书籍会被整理放在书架上方便查看存放&#xff0c;数据结构就是一种计算机存储管理数据的方式。 2. 什么是算法 算法就是一系列的计算…

FlinkSQL 中lateral table

在 Flink SQL 中&#xff0c;LATERAL TABLE 是一种用于处理依赖于外部表达式的表值函数&#xff08;Table-valued Function&#xff0c;简称 TVF&#xff09;的语法。LATERAL TABLE 用于在查询中扩展表&#xff0c;并将表值函数的结果与查询的其余部分进行连接&#xff08;LATE…