关于router-link和router-view

2023-11-06

router-link和router-view在同一个vue文件(A.vue)里面,router-link设置路由跳转,router-view根据路由显示组件

在同一个页面中,A.vue组件是全局的页面,B.vue组件和C.vue组件是A页面中的一部分

1,router-link设置路由跳转

<router-link :to="'/url/'">
    <li>
        <a>goto</a>
    </li>
</router-link>

2,在router/index.js上设置路由

{
    path: '/url',
    name: 'A组件',
    component: A,
    children: [
        {
            path: '/url/b',
            name: 'B组件',
            component: B,
        },
        {
            path: '/url/c',
            name: 'C组件',
            component: C,
        },
    ]
},

3,在router-view上显示(就是根据路由显示B组件还是C组件)

<router-view></router-view>

如果对我的其它文章有更多的兴趣,可以访问我的个人博客:uniqueho.xyz

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

关于router-link和router-view 的相关文章

  • unity使用setTrigger需注意地方

    使用上可以参考另一篇文章 RPG游戏主角状态机 Trigger触发器 注意都是从Any State开始的 否则你在使用Aniamtor的Trigger参数触发时没反应
  • 网页开发基础常见html、css

    目录 HTML基础 一 段落 行内和换行标签 二 文本样式标签 三 表格标签 四 表单标签 五 多行文本标签 六 列表标签 七 超链接标签 八 图像标签 HTML基础 html语言基本格式 常用的HTML标签 一 段落 行内和换行标签 二

随机推荐

  • 我为什么不在乎人工智能

    有人听说我想创业 给我提出了一些 忽悠 的办法 他们说 既然你是程序语言专家 而现在人工智能 AI 又非常热 那你其实可以搞一个 自动编程系统 号称可以自动生成程序 取代程序员的工作 节省许许多多的人力支出 这样就可以趁着 AI 热 拉到投
  • 记录一下:使用 python -m SimpleHTTPServer 快速搭建http服务

    为什么80 的码农都做不了架构师 gt gt gt 在 Linux 服务器上或安装了 Python 的机器上 Python自带了一个WEB服务器 SimpleHTTPServer 我们可以很简单的使用 python m SimpleHTTP
  • WinForm显示3D图(Sharpgl)

    总述 Sharpgl是 NET平台的Opengl 可以用来绘画 展示3D图 本文将介绍如何显示SOlidWorks等软件制作的3D模型 安装Sharpgl 下载SharpGL vsix文件并点击安装 VS中就会有相应的项目出现了 之后创建工
  • C语言(Head First C)-7:数据结构与动态存储

    该系列文章系个人读书笔记及总结性内容 任何组织和个人不得转载进行商业活动 7 数据结构与动态存储 一个结构根本不够 本章内容 1 如何用结构指针吧自定义数据类型连接成复杂的大型数据结构 通过创建链表探索其中的基本原理 2 通过在堆上动态分配
  • Jmeter元件正则表达式提取Response headers的数据

    本文以cookie提取为例来介绍用正则表达式如何提取Response headers的数据 实际cookie的获取只需要一个cookies管理器即可 jmeter会自动获取cookie 如果是用正则表达式提取Response headers
  • 基于深度学习的推荐系统(一)

    本文主要介绍推荐系统基本概念以及基本的协同过滤算法原理 推荐系统 快速有效地从复杂的数据中获取有价值的信息成为大数据大战的关键难题 推荐系统根据用户需求与兴趣 通过推荐算法从海量数据中挖掘出用户感兴趣的项目 如信息 服务 物品 将结果以个性
  • 前端基础知识6

    谈谈你对语义化标签的理解 语义化标签就是具有语义的标签 它可以清晰地向我们展示它的作用和用途 清晰的代码结构 在页面没有css的情况下 也能够呈现出清晰的代码内容 有利于SEO 爬虫依赖标签来确定关键字的权重 因此可以和搜索引擎建立良好的沟
  • SpringBoot 2.2.5 使用@ID 避坑指南

    1 如果你的数据库中没有主键 在你指定 ID的时候这个指必须是唯一的而且不能为null 如果不唯一 你数据库有6个数据 选为主键的字段 distinc一下有2个 那么就会3 3的重复 如果为null 则映射出来的bean中有null
  • FastDFS-02-JavaAPI

    我是码赛客1024 本节我们来使用java调用FastDFS进行文件上传等操作 一 介绍 在上一章节 咱们搭建好了fastdfs服务器 并实现了基于命令的上传测试和web访问 本节 咱们使用Java来调用API实现上传文件到FastDFS
  • linux命令&和&&,

    在linux中 和 和 介绍如下 表示任务在后台执行 如要在后台运行redis server 则有 redis server 表示前一条命令执行成功时 才执行后一条命令 如 echo 1 echo 2 表示管道 上一条命令的输出 作为下一条
  • 全网唯一最全彻底删除VS及VS注册表!

    当我们不再需要vs或者vs ide出现问题 并且你的专业课老师不教的情况下 怎么样独自且快速的情况下卸载干净 需要重装时 发现总是卸载不干净 卸载重装后该存在的问题还是存在 没有因重装而解决 那么如何彻底的卸载vs不留残留 设备 HPZHA
  • android集成flutter No implementation found for method getDatabasesPath on channel com.tekartik.sqflite

    项目场景 原有android项目集成flutter 环境 flutter sdk 1 17 4 android studio 3 6 3 android sdk 29 问题描述 运行报错 Unhandled Exception Missin
  • 模板和容器

    1 什么是模板 模板定义 模板就是实现代码重用机制的一种工具 它可以实现类型参数化 即把类型定义为参数 从而实现了真正的代码可重用性 我们知道 C 是一种 强类型 的语言 也就是说一个变量 编译器必须确切的知道它的类型 而模板就是构建在这个
  • 爬虫实战学习----基础

    今天在学习爬虫入门的过程中 遇到了百度的反爬 发送请求无法得到内容 出现 网络不给力 稍后重试 或者 百度安全验证 写一下当时的解决方案 最基础的导入 发送请求和打印数据如下 导入模块 import requests 发送get请求 res
  • tf好朋友之matplotlib的使用——连续图像部分plt.plot

    tf好朋友之matplotlib的使用 连续图像部分plt plot 连续图像常用函数及其作用 plt plot plt figure plot 应用示例 学了这么多机器学习 好像还不知道这么去展示我的学习成果 一想到matlab里面有这么
  • 树莓派上手第一课:系统烧录,树莓派的配置,获取ip,ssh,远程桌面...

    最近树莓派涨价挺高的 卖了我的3b 小赚了几百块钱 借了朋友的3b来写篇关于树莓派的入门博客吧 主要包括系统烧录 树莓派的配置 ssh 远程桌面 系统烧录 准备一个树莓派 8g及8g以上的tf卡 键盘 鼠标 HDMI输出的显示屏 去官网下载
  • 大数据、云计算、区块链、人工智能!你选择哪个?

    日前 在以 突破 为主题的t112018暨talkingdata数值智能峰会上 数千名相干行业从业者研讨以数值驱动冲破发展的新模式 新路径 目前计算机相干领域的就业情况还是比较不错的 随着大数据 物联网 区块链 人工智能等技术的快速进展 这
  • 基于单片机智能温室大棚控制系统

    功能介绍 以51单片机作为主控系统 DS18B20温度采集模块检测温度 光敏电阻和ADC0832组成的光照检测模块 土壤湿度检测模块检测土壤湿度 CO2检测模块检测CO2浓度 LCD1602显示模块显示测量值 若温度小于温度最小值 声光报警
  • Operator方式下的Prometheus监控二进制方式部署的kubernetes组件

    Operator方式下的Prometheus默认监控的是以静态pod形式部署的kubernetes组件 kubectl kube controller manager kube scheduler 如果需要监控以rpm包或者二进制包方式部署
  • 关于router-link和router-view

    router link和router view在同一个vue文件 A vue 里面 router link设置路由跳转 router view根据路由显示组件 在同一个页面中 A vue组件是全局的页面 B vue组件和C vue组件是A页