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;效果一览基本介绍程序设计参考资料 效果一览 基…

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

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

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

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

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

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

【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;协程的优点协程代码实例 进程、线程和协程适合的任务性质和环境多进程更适合的场景多线程更适合的场…

在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. 什么是算法 算法就是一系列的计算…

UDP和TCP(传输层)

这里写目录标题 UDPUDP的基本特点UDP协议报文格式 TCPTCP协议报文格式TCP特点可靠传输实现机制确认应答超时重传数据丢了应答报文丢了 小结 UDP UDP的基本特点 无连接不可靠传输面向数据报全双工 UDP协议报文格式 2个字节有效范围(无符号): 0 ~ 65535(2^16 - 1). 2个字节有效范…

安装 AngularJS

安装 AngularJS 文章目录 安装 AngularJS1. 使用在线 cdn2. 使用依赖管理工具 npm 1. 使用在线 cdn <!-- 1. 引入在线地址 --> <script src"http://code.angularjs.org/1.2.25/angular.min.js"></script><!-- 2. 下载到本地&#xff0c;引入文…

【Python】常用数据结构

1、熟悉字典和列表 2、使用条件判断语句 3、list列表中计算 1、从键盘输人一个正整数列表,以-1结束,分别计算列表中奇数和偶数的和。 &#xff08;1&#xff09;源代码&#xff1a; # 初始化奇数和偶数的和为0 odd_sum 0 even_sum 0 #输入 while True:num int(input(&qu…

ubuntu下安装配置python3.11

方案1 添加仓库&#xff1a; $ sudo add-apt-repository ppa:deadsnakes/ppa $ sudo apt update $ sudo apt install python3.11然后查看有多少个python版本已经安装了&#xff1a; ls -l /usr/bin/python*python2.7,python 3.8 ,python 3.11. 然后&#xff0c;设置系统默认…

智能车入门——‘教程引导’ <新手从零做车>

目录 前言 本系列文章是为了帮助第一次接触智能车或者学校没有传承&#xff0c;不知道如何上手做智能车的同学。 通过阅读完整个系列&#xff0c;你应该能够制作一辆正常参赛的智能车。 我写这一系列博客的初衷主要是为了方便新手快速入门智能车。 如果追求高级算法以及提速&a…

Q1季度家用健身器械行业线上市场销售数据分析

自疫情开始&#xff0c;全民健身的浪潮就持续至今。然而&#xff0c;水能载舟亦能覆舟&#xff0c;一边是不断释放的健身需求&#xff0c;另一边却是无数健身房的闭店潮。 越来越多人倾向于选择家用健身器械来运动或是直接选择无器械的健身运动&#xff0c;比如各类健身操。而…

AngularJS 的生命周期和基础语法

AngularJS 的生命周期和基础语法 文章目录 AngularJS 的生命周期和基础语法1. 使用步骤2. 生命周期钩子函数3. 点击事件4. if 语句1. if 形式2. if else 形式 5. for 语句6. switch 语句7. 双向数据绑定 1. 使用步骤 // 1. 要使用哪个钩子函数&#xff0c;就先引入 import { O…

Windows下载MingGW

因为要配置vscode的c/c环境&#xff0c;需要下载一个编译器&#xff0c;gcc官方推荐开源的MingGW-W64&#xff0c;看了几个下载方法&#xff0c;决定用最简单的离线安装。 niXman/mingw-builds-binaries/releases 32位的操作系统&#xff1a;i686&#xff0c;64位的操作系统&a…

linux的常见命令

&#x1f4dd;个人主页&#xff1a;五敷有你 &#x1f525;系列专栏&#xff1a;Linux ⛺️稳中求进&#xff0c;晒太阳 Linux中检查进程是否存在&#xff1a; ps -ef | grep [进程名或进程ID] pgrep -f [进程名|进程ID] pidof [进程名] Linux中检查某个端口是否被…