⑥ 在vue中引入路由

news2025/1/20 18:26:25

什么是路由:管理页面的跳转(vue-router)
官方文档

https://router.vuejs.org/zh/introduction.html

第一步:安装路由后启动项目

npm install --save vue-router

配置独立的路由文件

在src目录文件下新建一个文件夹router,新建文件index.js
在这里插入图片描述
先要有页面,创建两个vue页面,引入到index.js里面
在这里插入图片描述

import { createRouter,createWebHashHistory } from "vue-router";
import  homevue  from "../view/Homevue";
import  about  from "../view/About";

//配置信息中需要页面的相关配置

const routes = [
    {
        path: '/',
        component:homevue//对应的那个组件
    },
    {
        path:'/about',
        component:about
    }
]


const router = createRouter({
	// createWebHistory      访问的时候网址是http://localhost:8080/about
    // 此种方式需要后台配合做重定向,否则会出现404问题
    // 原理:HS pushState()


    // createWebHashHistory  访问的时候网址是http://localhost:8080/#/about
    // 原理:a标签的锚点链接
    history:createWebHashHistory(),
    routes
})


//导出
export default router;

在这里插入图片描述

引入路由到项目当中

在main.js引入
在这里插入图片描述

指定路由显示入口 router-view

然后在app.vue页面上显示
在这里插入图片描述

实现路由的跳转

在这里插入图片描述

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

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

相关文章

C++--day6

将之前定义的栈类和队列类都实现成模板类 栈&#xff1a; #include <iostream>using namespace std; template<typename T> class zn { private:T *num;int top;int size; public: //有参构造函数 zn(int a):top(-1),size(a){numnew T[size]; } //析构函数 ~zn()…

通过 DevOps、CI/CD 和容器增强您的软件开发之旅...

软件行业已经在 DevOps、CI/CD 和容器中找到了针对开发导向问题的有效解决方案。尽管并不强制要求将这三者一起使用&#xff0c;但它们通常是相互补充和依赖的。 DevOps 促进开发和 IT 团队之间的协作&#xff0c;而 CI/CD 简化软件交付流程以更快地获得结果。容器化将应用程序…

智安新闻|智安网络亮相2023网安周!

一年一度的国家网络安全“顶级盛事”——2023年国家网络安全宣传周9月拉开帷幕&#xff0c;本次展览会以“网络安全为人民&#xff0c;网络安全靠人民”为主题&#xff0c;旨在通过展览及现场互动广泛宣传网络安全知识与技能&#xff0c;提升全民网络安全意识&#xff0c;共同构…

前端之webpck的优化

一、webpack的打包流程/webpack的机制/原理/webpack是怎么打包的 1 webpack是根据运行的指令来决定一个基本的业务流程 2 如果是build 就是执行打包&#xff0c;如果是 配合了devServer就是就行本地化的调试。 两者其实在本质上没有太大区别&#xff0c;只是devServer会运行一…

Timestone: Netflix的高吞吐、低延迟优先级队列系统

队列系统是微服务系统的核心组件之一&#xff0c;本文介绍了Netflix内部构建的高吞吐量、低优先级队列系统。原文: Timestone: Netflix’s High-Throughput, Low-Latency Priority Queueing System with Built-in Support for Non-Parallelizable Workloads 简介 Timestone是Ne…

【深度学习-注意力机制attention 在seq2seq中应用】

注意力机制 为什么需要注意力机制attention机制的架构总体设计一、attention本身实现评分函数 attention在网络模型的应用-Bahdanau 注意力加性注意力代码实现 为什么需要注意力机制 这是一个普通的seq2seq结构&#xff0c;用以实现机器对话&#xff0c;Encoder需要把一个输入的…

损失函数loss和优化器optimizer

损失函数与优化器的关联_criterion(outputs, labels)_写代码_不错哦的博客-CSDN博客https://blog.csdn.net/shenjianhua005/article/details/123971915?ops_request_misc&request_id6583569ecbdc4daf89dbf2d43eac9242&biz_id&utm_mediumdistribute.pc_search_resu…

2023常用的原型设计软件推荐

美观易操作的产品原型可以帮助团队构建积极的用户体验&#xff0c;帮助团队理解产品交互逻辑。 因此&#xff0c;可互动、易修改的产品原型设计对产品的点击率和回访率具有重要意义。 选择专业的产品原型设计工具&#xff0c;可以为团队和企业带来高效的产品设计体验。本文选…

算法通关村第十四关——解析堆在数组中找第K大的元素的应用

力扣215题&#xff0c; 给定整数数组nums和整数k&#xff0c;请返回数组中第k个最大的元素。 请注意&#xff0c;你需要找的是数组排序后的第k个最大的元素&#xff0c;而不是第k个不同的元素。 分析&#xff1a;按照“找最大用小堆&#xff0c;找最小用大堆&#xff0c;找中间…

亲手实现:全方位解析SpringCloud Alibaba,这份全彩笔记送给你

SpringCloud Aliababa简介 大家好&#xff0c;这次我们来分享一个实用的开源项目—SpringCloud Alibaba。 SpringCloud是国内外微服务开发的首选框架&#xff0c;而SpringCloud Alibaba则是阿里巴巴为微服务架构而开发的组件&#xff0c;它支持SpringCloud原生组件&#xff0…

数据分析三剑客之Numpy

数据分析三剑客&#xff1a;Numpy&#xff0c;Pandas&#xff0c;Matplotlib 1.简介 NumPy(Numerical Python) 是 Python 语言的一个扩展程序库&#xff0c;支持大量的维度数组与矩阵运算&#xff0c;此外也针对数组运算提供大量的数学函数库。 numpy是基于c语言开发&#x…

第二章 进程与线程 一、进程的概念、组成、特征

目录 一、进程的组成 ​编辑 二、概念 程序: 进程&#xff08; Process) : PID: 进程控制块&#xff08;PCB&#xff09;: 三、特征 1、动态性&#xff08;最基本的特性&#xff09; 2、并发性 3、独立性 4、异步性 5、结构性 一、进程的组成 二、概念 程序: 是静…

针对电子企业的数字工厂管理系统解决方案

随着科技的飞速发展和市场竞争的日益激烈&#xff0c;电子企业需要一种高效、智能的数字工厂管理系统解决方案&#xff0c;以提升生产效率、优化资源利用、降低运营成本&#xff0c;并确保高品质产品的输出。本文将详细探讨针对电子企业的数字工厂管理系统解决方案。 一、数字工…

页面静态化、Freemarker入门

页面静态化介绍 页面的访问量比较大时&#xff0c;就会对数据库造成了很大的访问压力&#xff0c;并且数据库中的数据变化频率并不高。 那需要通过什么方法为数据库减压并提高系统运行性能呢&#xff1f;答案就是页面静态化。页面静态化其实就是将原来的动态网页(例如通过ajax…

jmeter线程组 bzm - Arrivals Thread Group 阶梯式压测

简介 BZM - Arrivals Thread Group是jmeter的一个插件&#xff0c;它可以模拟并发到达的用户流量、按时间加压&#xff0c;可以有效地帮助测试人员评估系统在高压力和高并发情况下的性能表现。 插件下载地址&#xff08;jmeter版本不低于 5.2.0 &#xff09;&#xff1a;https:…

开课吧(三)机器人系统(ros详解)

目录 常用快捷键&#xff1a; 常用命令&#xff1a; Catkin编译系统&#xff1a; 简析.XML文件&#xff08;说明书&#xff09; name指package名字 version指版本 description指描述 maintainer指拥有者 license指授权 buildtool_depend 依赖catkin编译 build_depend指依…

【C++】day6学习成果:继承、多态、栈和循环队列

1.将之前定义的栈类和队列类都实现成模板类 栈&#xff1a; #include <iostream>#define MAX 8using namespace std;template<typename T> class Stack { private:T *data; //栈的数组&#xff0c;指向堆区空间&#xff0c;用于存储栈的容器int top; …

基于元素小组的归并排序算法

问题说明 什么是针对元素小组的归并排序算法&#xff0c;举个例子&#xff1a;假如有一个数组[1,2,3,4,5,6,7,8,9]&#xff0c;{1,2,3}为一个小组&#xff0c;{4,5,6}为一个小组&#xff0c;{7,8,9}为一个小组&#xff0c;现需要根据每个小组的第一个元素来进行排序&#xff0…

upload-labs文件上传靶场实操

文章目录 1.Pass-012.Pass-023.Pass-034.Pass-045.Pass-056.Pass-067.Pass-078.Pass-089.Pass-0910.Pass-1011.Pass-1112.Pass-1213.Pass-1314.Pass-1415.Pass-1516.Pass-16 1.Pass-01 改后缀名绕过 只能上传图片&#xff0c;先上传一个jpg格式的图片&#xff0c;然后抓包改格…

如何在 Excel 中进行加,减,乘,除

在本教程中&#xff0c;我们将执行基本的算术运算&#xff0c;即加法&#xff0c;减法&#xff0c;除法和乘法。 下表显示了我们将使用的数据以及预期的结果。 | **S / N** | **算术运算符** | **第一个号码** | **第二个号码** | **结果** | | 1 | 加法&#xff08;&#xff…