当前位置: 首页 > news >正文

router基础使用

 1.安装router

npm i vue-router@3

安装后

2.写出路由界面

接着

3.配置路由

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from "../views/Home.vue"
import About from "../views/About.vue"
Vue.use(VueRouter)const routes = [{ path: '/home', component: Home },{ path: '/about', component: About }
]const router = new VueRouter({routes
})export default router

4.在main.js挂载路由

import router from './router';new Vue({router,render: h => h(App),
}).$mount('#app')

import router from './router';//此处省略index.js,会默认去读取

5.写路由出口

在App.vue中写<router-view></router-view>

6.子路由

const routes = [{ path: '/', component: Main ,children:[{ path: 'home', component: Home },{ path: 'about', component: About }]},]

这里子路由不能是/about这种带斜杠的,会报错

记得在主路由下写路由出口(指App.vue下一个路由出口,主路由下一个路由出口),这样才能显示出子路由

子路由运用,比如后台管理系统,上面导航和左侧导航不变,只变右下的区域,这时候就用子路由

注意!这里是path: '/', 不是path: '/'main, 

前者直接/子路由就可以跳转,后者必须/main/子路由

相关文章:

router基础使用

1.安装router npm i vue-router3 安装后 2.写出路由界面 接着 3.配置路由 import Vue from vue import VueRouter from vue-router import Home from "../views/Home.vue" import About from "../views/About.vue" Vue.use(VueRouter)const routes …...

亚马逊云科技人工智能内容审核服务:大大降低生成不安全内容的风险

生成式人工智能技术发展日新月异&#xff0c;现在已经能够根据文本输入生成文本和图像。Stable Diffusion是一种文本转图像模型&#xff0c;可以创建栩栩如生的图像应用。通过Amazon SageMaker JumpStart&#xff0c;使用Stable Diffusion模型轻松地从文本生成图像。 尽管生成式…...

2023年高教社杯数学建模思路 - 案例:最短时间生产计划安排

文章目录 0 赛题思路1 模型描述2 实例2.1 问题描述2.2 数学模型2.2.1 模型流程2.2.2 符号约定2.2.3 求解模型 2.3 相关代码2.4 模型求解结果 建模资料 0 赛题思路 &#xff08;赛题出来以后第一时间在CSDN分享&#xff09; https://blog.csdn.net/dc_sinor?typeblog 最短时…...

算法工程题(二叉树递归)

* 题意说明&#xff1a; * 给你两棵二叉树的根节点 p 和 q &#xff0c;编写一个函数来检验这两棵树是否相同。 * 如果两个树在结构上相同&#xff0c;并且节点具有相同的值&#xff0c;则认为它们是相同的。 * * 示例 1&#xff1a; * 输入&#xff1a;p [1,2,3]…...

“指针跃动”受邀参加全球贸易服务峰会

“指针跃动”受邀参加全球贸易服务峰会 有“服”同享 共赢未来 引子 在全球化日益盛行的今天&#xff0c;贸易不再仅仅是物质的交流&#xff0c;更涉及到服务、理念、文化和科技的共享。中国国际服务贸易交易会全球贸易服务峰会&#xff0c;就是这个趋势的集中体现。在这次峰会…...

Go Web开发的高级技巧和最佳实践

Go Web开发的高级技巧和最佳实践 欢迎来到Go语言Web开发的高级技巧和最佳实践指南。在这篇文章中&#xff0c;我们将深入探讨Go语言Web应用程序的高级主题&#xff0c;包括性能优化、安全性、部署和微服务架构。 性能优化 性能是Web应用程序的关键因素之一。Go语言以其出色的…...

Verilog 基础知识

1、数值种类 Verilog HDL 有下列四种基本的值来表示硬件电路中的电平逻辑&#xff1a; 0&#xff1a;逻辑 0 或 “假”1&#xff1a;逻辑 1 或 “真”x 或 X&#xff1a;未知 x 意味着信号数值的不确定&#xff0c;即在实际电路里&#xff0c;信号可能为 1&#xff0c;也可能…...

element ui 表格组件与分页组件的二次封装

目录 组件封装 parseTime函数 debounce 函数 页面使用 【扩展】vue 函数式组件 函数式组件特点&#xff1a; 函数式组件的优点&#xff1a; 【扩展】vue中的render函数 一、初步认识render函数 二、为什么使用render函数 三、render函数的解析 组件封装 这段代码是一…...

递归算法学习——有效的数独,解数独

一&#xff0c;有效的数独 1.题意 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一行只能出现一次。数字 1-9 在每一列只能出现一次。数字 1-9 在每一个以粗实线分隔的 3x3 宫内只能出现一次。&#x…...

基于Alexnet深度学习网络的人员口罩识别算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 file_path1 test\mask\;% 图像文件夹路径 %获取测试图像文件夹下所有jpg格式的图像文件…...

【Java Web】利用Spring整合Redis,配置RedisTemplate

1. 在config中加入RedisConfig配置类 package com.nowcoder.community.config;import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.data.redis.connection.RedisConnectionFacto…...

如何正确的写出第一个java程序:hello java

1 前言 最近公司由于项目需要&#xff0c;开始撸java代码了。学习一门新的编程语言&#xff0c;刚开始总是要踩很多坑&#xff0c;所以记录一下学习过程&#xff0c;也希望对java初学者有所帮助。 2 hello java 2.1 程序源码 程序内容十分简单&#xff0c;这里就不再过多赘…...

使用llvm 编译最新的linux 内核(LoongArch)

1. 准备交叉工具链 llvm 使用了最新的llvm-17, 编译方法见:编译LoongArch的llvm交叉工具链 gcc 从linux 官方下载&#xff1a;http://mirrors.edge.kernel.org/pub/tools/crosstool/files/bin/x86_64/13.2.0/x86_64-gcc-13.2.0-nolibc-loongarch64-linux.tar.xz 发布llvm和g…...

Using Multiple RDF Knowledge Graphs for Enriching ChatGPT Responses

本文是LLM系列文章&#xff0c;针对《Using Multiple RDF Knowledge Graphs for Enriching ChatGPT Responses》的翻译。 使用多个RDF知识图来丰富ChatGPT响应 摘要1 引言2 相关工作3 GPT-LODS的过程和用例4 结束语 摘要 最近有一种趋势是使用新型人工智能聊天GPT聊天箱&…...

【Hive-小文件合并】Hive外部分区表利用Insert overwrite的暴力方式进行小文件合并

这里我们直接用实例来讲解&#xff0c;Hive外部分区表有单分区多分区的不同情况&#xff0c;这里我们针对不同情况进行不同的方式处理。 利用overwrite合并单独日期的小文件 1、单分区 # 开启此表达式&#xff1a;(sample_date)?. set hive.support.quoted.identifiersnon…...

位运算 |(按位或) (按位与) ^(按位异或)

目录 文章目录&#xff1a;本章讲解的主要是刷题系列 1&#xff1a;首先会介绍 I & ^这三个操作符的作用&#xff0c;性质 2&#xff1a;三道使用位运算操作符的经典 笔试题(来自剑指offer) 题目链接如下&#xff1a; 1:136. 只出现一次的数字 - 力扣&#xff08;LeetCode…...

Qt应用开发(基础篇)——复选按钮 QCheckBox 单选按钮 QRadioButton

一、前言 QCheckBox类与QRadioButton类继承于QAbstractButton&#xff0c;QCheckBox是一个带有文本标签的复选框&#xff0c;QRadioButton是一个带有文本标签的单选按钮。 按钮基类 QAbstractButton QCheckBox QCheckBox复选框是一个很常用的控件&#xff0c;拥有开关(选中和未…...

AERMOD模型大气环境影响评价

随着我国经济快速发展&#xff0c;我国面临着日益严重的大气污染问题。近年来&#xff0c;严重的大气污染问题已经明显影响国计民生&#xff0c;引起政府、学界和人们越来越多的关注。大气污染是工农业生产、生活、交通、城市化等方面人为活动的综合结果&#xff0c;同时气象因…...

递归组装树结构的数据

开发中&#xff0c;经常遇到存在树形结构的数据&#xff0c;如行政区划这类数据&#xff0c;一级一级分层&#xff0c;后端需要组装好树形结构数据返回给前端。 由于返给前端的json数据中&#xff0c;如果是叶子节点了&#xff0c;说明它没有子节点&#xff0c;那么就没必要返…...

企业架构LNMP学习笔记7

PHP介绍&#xff1a; HTML&#xff1a;超文本标记语言 http: 超文本传输协议 端口80 浏览器将html代码解析成web页面。 PHP&#xff1a;超文本预处理器。后端语言开发&#xff0c;页面上需要动态改变修改的&#xff0c;需要连接数据库查询数据&#xff0c;转为html。 主要…...

前端埋点数据爆炸?WebTracing缓存策略与采样率配置避坑指南

前端埋点数据治理实战&#xff1a;WebTracing缓存策略与采样率配置深度解析 当你的应用日活突破百万量级时&#xff0c;埋点数据会像雪崩一样涌向服务器。某电商平台曾因未合理配置前端监控&#xff0c;导致单日产生2.3TB冗余埋点数据&#xff0c;不仅每年浪费数百万云存储成本…...

MiniCPM-V-2_6代码截图理解:函数逻辑分析+注释生成效果展示

MiniCPM-V-2_6代码截图理解&#xff1a;函数逻辑分析注释生成效果展示 1. 引言&#xff1a;当AI能看懂代码截图 你有没有遇到过这样的情况&#xff1a;看到一个复杂的代码截图&#xff0c;想要理解其中的函数逻辑&#xff0c;却需要一行行手动输入代码&#xff1f;或者面对一…...

机械设计制造及自动化—万门大学月特训班 (清华老师讲授) 1、机械制图 2、机械制造 3、机械原理 4、机械设计

机械设计制造及自动化—万门大学月特训班 &#xff08;清华老师讲授&#xff09; 1、机械制图 2、机械制造 3、机械原理 4、机械设计 全580集&#xff0c;直接从零基础到机械设计与自动化行业大佬 在这里插入图片描述...

FanControl实战指南:从噪音困扰到智能散热的转型之路

FanControl实战指南&#xff1a;从噪音困扰到智能散热的转型之路 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/fa/…...

微信小程序蓝牙打印中文乱码?手把手教你GBK编码转换(附完整Demo)

微信小程序蓝牙打印中文乱码终极解决方案&#xff1a;从编码原理到完整实现 蓝牙打印机在零售、餐饮等行业的应用越来越广泛&#xff0c;而微信小程序作为轻量级应用平台&#xff0c;与蓝牙打印机的结合为商家提供了便捷的移动打印方案。但在实际开发中&#xff0c;开发者经常会…...

SillyTavern:重新定义AI角色扮演的沉浸式交互平台

SillyTavern&#xff1a;重新定义AI角色扮演的沉浸式交互平台 【免费下载链接】SillyTavern LLM Frontend for Power Users. 项目地址: https://gitcode.com/GitHub_Trending/si/SillyTavern 当我们在数字世界中寻找真实的情感连接时&#xff0c;AI对话系统往往陷入机械…...

DanKoe 视频笔记:阅读:改变你生活的简单习惯:概述与引言

https://github.com/OpenDocCN/wealth-notes-zh/raw/master/docs/dankoe/img22971bb5176092c90f7464d7a7aa6e45.png 在本节课中&#xff0c;我们将学习如何通过培养阅读习惯来深刻地改变你的生活。我们将探讨阅读的重要性、如何选择书籍、如何有效阅读&#xff0c;以及如何将阅…...

从一次数据精度丢失的坑说起:详解Pandas fillna的‘静默下转型’与infer_objects的正确用法

从数据精度陷阱到稳健处理&#xff1a;Pandas类型转换的深度防御实践 1. 当.fillna(0)成为数据分析的隐形杀手 凌晨三点的办公室&#xff0c;咖啡杯早已见底。数据分析师李明盯着屏幕上诡异的报表结果——所有百分比计算结果突然变成了整齐的整数。这个看似简单的数据清洗操作…...

手把手教你用逻辑分析仪抓取DVC1124的I2C波形(附CRC校验分析)

手把手教你用逻辑分析仪抓取DVC1124的I2C波形&#xff08;附CRC校验分析&#xff09; 在嵌入式硬件调试中&#xff0c;I2C通信的波形分析是验证设备交互正确性的关键步骤。集澈DVC1124作为一款高性能AFE芯片&#xff0c;其I2C协议中独特的CRC校验机制为通信可靠性提供了保障。本…...

GD32F450VK移植RT-Thread时如何避免SRAM分区导致的HardFault(附解决方案)

GD32F450VK移植RT-Thread的SRAM分区陷阱与实战解决方案 在嵌入式开发领域&#xff0c;GD32F4系列微控制器凭借其出色的性价比和丰富的外设资源&#xff0c;正逐渐成为工业控制、物联网终端等场景的热门选择。然而&#xff0c;当开发者尝试将RT-Thread实时操作系统移植到GD32F4…...