【vue2配置】Vue Router

Vue Router官网
1、npm install vue-router@4
2、创建模块,在src目录小创/views/map/MapIndex.vue模块和创router/index.js文件
在这里插入图片描述
3、在router/index.js配置路由

import Vue from "vue";
import Router from "vue-router";
// 引入模块
const MapIndex = () => import("@/views/map/MapIndex.vue");
// 安装路由
Vue.use(Router);
// 创建路由实例
const router = new Router({// 创建路由对象routes: [{path: "/",// 重定项redirect: "/mapIndex",},{path: "/mapIndex",component: MapIndex,},]
});
/* 因为要挂载导航守卫 所以不能实时导出 */
export default router;

4、在main.js导入router
在这里插入图片描述5、App.vue调用
在这里插入图片描述

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

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

相关文章

C语言——在头⽂件中#if、_STDC_等字⾏起什么作⽤?

一、问题 通常,⼀些程序员都不会去研究头⽂件中的内容是什么含义,总觉得乱乱的,有很多 #if、_STDC_、#line 等字符,那么这些字符都各代表什么呢,在头⽂件中又起到什么作⽤呢? 二、解答 在头⽂件中存在类似…

智慧校园建设的进阶之路

智慧校园的建设现已到达了老练的阶段,许多学校设备充满着数字化信息,进出宿舍楼,校园一卡通体系会记载下学生信息,外来人员闯入会报警,翻开电脑就能查到学生是否在宿舍等……学生的学习和日子都充满了数字化的痕迹。但…

C# WPF入门学习(三)

目录 核心架构 核心组件和概念 1. XAML(eXtensible Application Markup Language) 2. 依赖属性(Dependency Properties) 3. 路由事件(Routed Events) 4. 数据绑定 5. 命令(Commands&…

itertools内置模块的过滤妙用

itertools内置模块的妙用 过滤源迭代器中的元素 Python内置itertools模块里有一些函数可以过滤源迭代器中的元素。 islice islice可以在不拷贝数据的前提下,按照下标切割源迭代器。可以只给出切割的终点,也可以同时给出起点和终点,还可以…

MongoDB 覆盖索引查询:提升性能的完整指南

MongoDB 覆盖索引查询是一种优化数据库查询性能的技术,它通过创建适当的索引,使查询可以直接从索引中获取所需的数据,而无需访问实际的文档数据。这种方式可以减少磁盘 I/O 和内存消耗,提高查询性能。 基本语法 在 MongoDB 中&a…

SQL练习题:2.4

建表 # 学生表 create table t_student (stu_id varchar(10),stu_name varchar(10),stu_age datetime,stu_sex varchar(10) );# 课程表 create table t_t_course (c_id varchar(10),c_name varchar(10),c_teaid varchar(10) );# 教师表 create table t_t_teacher (tea…

光速入门python的OpenCV

前言 欢迎来到我的博客 个人主页:北岭敲键盘的荒漠猫-CSDN博客 本文整理python的OpenCV模块的关键知识点 争取用最短的时间入门OpenCV 并且做到笔记功能直接复制使用 OpenCV简介 不浪费时间的介绍: 就是类似于ps操作图片。 至于为什么不直接用ps,因为只有程序能…

【找出满足差值条件的下标 I】python

目录 暴力题解 优化:滑动窗口维护大小值 暴力题解 class Solution:def findIndices(self, nums: List[int], indexDifference: int, valueDifference: int) -> List[int]:nlen(nums)for i in range(n):for j in range(n-1,-1,-1):if abs(i-j)>indexDiffere…

海康威视NVR通过ehome协议接入视频监控平台,视频浏览显示3011超时错误的问题解决,即:The request timeout! 【3011】

目录 一、问题描述 二、问题分析 2.1 初步分析 2.2 查看日志 2.3 问题验证 1、查看防火墙 2、查看安全组 3、问题原因 三、问题解决 3.1 防火墙开放相关端口 3.2 安全组增加规则 3.3 测试 1、TCP端口能够联通的情况 2、TCP端口不能够联通的情况 四、验证 五、云…

「51媒体」如何与媒体建立良好关系?

传媒如春雨,润物细无声,大家好,我是51媒体网胡老师。 与媒体建立良好关系对于企业或个人来说都是一项重要的公关活动。 了解媒体:研究媒体和记者的兴趣,提供相关且有价值的信息。 建立联系:通过专业的方式…

牛客NC324 下一个更大的数(三)【中等 双指针 Java/Go/PHP/C++】参考lintcode 52 · 下一个排列

题目 题目链接: https://www.nowcoder.com/practice/475da0d4e37a481bacf9a09b5a059199 思路 第一步:获取数字上每一个数,组成数组arr 第二步:利用“下一个排列” 问题解题方法来继续作答,步骤:利用lintc…

C++进阶之路:何为拷贝构造函数,深入理解浅拷贝与深拷贝(类与对象_中篇)

✨✨ 欢迎大家来访Srlua的博文(づ ̄3 ̄)づ╭❤~✨✨ 🌟🌟 欢迎各位亲爱的读者,感谢你们抽出宝贵的时间来阅读我的文章。 我是Srlua小谢,在这里我会分享我的知识和经验。&am…

PostgreSQL基础(三):PostgreSQL的基础操作

文章目录 PostgreSQL的基础操作 一、用户操作 二、权限操作 三、操作任务

DRM驱动(五)之drm_atomic_state

上节讲到《DRM驱动(四)之ADD_FB》调用drmModeAddFB创建drm_framebuffer。然后通过 drmIoctl(fd, DRM_IOCTL_MODE_MAP_DUMB, &map); vaddr mmap(0, create.size, PROT_READ | PROT_WRITE,MAP_SHARED, fd, map.offset); 将物理地址map到用户空间后…

Python中list遍历的几种方式之没有好与不好,只有合适不合适

Python中list遍历的几种方式 引言 Python是一种动态、解释型的高级编程语言,以其简洁、易读的语法而广受欢迎。在Python中,list是一种非常重要的数据结构,它允许存储一系列的元素,这些元素可以是任何类型。遍历list是处理数据的…

nginx的Connection refused

问题描述 nginx的错误日志中突然出现大量的的Connection refused问题,日志如下: 2020/03/19 09:52:53 [error] 20117#20117: *7403411764 connect() failed (111: Connection refused) while connecting to upstream, client: xxx.xxx.xxx.xxx, server:…

解决CLion调试时无法显示变量值的问题

1 问题描述 使用CLion的时候,调试时无法显示变量的值,例如: 图来自StackOverflow。 2 解决办法 可以尝试切换调试器解决,在Linux下,CLion支持GDB和LLDB,如果GDB不行,可以切换到LLDB。 切换方…

医院信息化IT监控一体化运维实践

作者: 晓风 在医疗信息化日益发展的今天,医院数据中心的运维工作显得尤为重要。为了确保医疗系统的稳定运行,保障患者数据的安全与完整,我院在信息化IT监控一体化运维方面进行了深入的探索和实践。 一、背景与挑战 我院的机房设备规模已有50…

主动归档存储的策略研讨

在媒体与娱乐(M&E)行业中,主动存档策略对于应对内容的持续需求增长、控制存储成本膨胀以及实现档案内容的货币化至关重要。以下是对此策略的深入分析: ### 持续的内容需求带来的挑战 M&E企业面临着巨大的挑战&#xff1…

【Spring】SSM整合_入门代码实现

1. Maven依赖 在pom.xml中添加SSM框架的依赖 <!-- Spring Core --> <dependency> <groupId>org.springframework</groupId> <artifactId>spring-context</artifactId> <version>5.3.x</version> </dependency>…