Vue组件路由

1,安装vue-router组件,终端输入:

npm i vue-router@3.5.3

2,在src文件夹下创建router目录

3,创建index.js文件,配置路由,导入需要路由的组件。以后每次添加路由只要在routes中改变即可。

import Vue from 'vue';
import router from 'vue-router'; /* 导入路由 */
import Login from '../Login.vue'; /* 导入其他组件 */
import main from '../main.vue'; /* 导入其他组件 */Vue.use(router);/* 定义组件路由 */
var rout = new router({routes: [{path: '/',name: 'Login',component: Login},{path: '/Login',name: 'Login',component: Login},{path: '/main',component: main},]
});//导出路由对象
export default rout;

4,在main.js配置路由,导入vue路由组件

import Vue from 'vue'
import App from './App.vue'
import router from './router/index.js'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
Vue.use(router);new Vue({el: '#app',router,render: h => h(App)
})
Vue.config.productionTip = false

 

 

 

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

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

相关文章

【算法|动态规划No.12】leetcode152. 乘积最大子数组

个人主页:兜里有颗棉花糖 欢迎 点赞👍 收藏✨ 留言✉ 加关注💓本文由 兜里有颗棉花糖 原创 收录于专栏【手撕算法系列专栏】【LeetCode】 🍔本专栏旨在提高自己算法能力的同时,记录一下自己的学习过程,希望…

websocket实现go(server)与c#(client)通讯

go 服务端 使用到github.com/gorilla/websocket package mainimport ("fmt""github.com/gorilla/websocket""log""net/http" )func main() {var upgrader websocket.Upgrader{ReadBufferSize: 1024,WriteBufferSize: 1024,CheckOr…

GPU如何成为AI的加速器

0. 前言 按照国际惯例,首先声明:本文只是我自己学习的理解,虽然参考了他人的宝贵见解,但是内容可能存在不准确的地方。如果发现文中错误,希望批评指正,共同进步。 本文关键词:GPU、深度学习、GP…

提示msvcp140.dll丢失的5个解决方法,msvcp140.dll丢失问题全面分析

在我们的日常生活和工作中,电脑已经成为不可或缺的工具。然而,在使用电脑的过程中,我们经常会遇到各种问题,其中就包括提示 msvcp140.dll 丢失的问题。msvcp140.dll 是 Visual C Redistributable for Visual Studio 2015 的运行时…

lv7 嵌入式开发-网络编程开发 10 TCP协议是如何实现可靠传输的

目录 1 TCP 最主要的特点 1.1 特点 1.2 面向流的概念 1.3 Socket 有多种不同的意思 2 TCP是如何实现可靠传输的? 3 TCP报文段的首部格式 4 作业 1 TCP 最主要的特点 TCP 是面向连接的运输层协议,在无连接的、不可靠的 IP 网络服务基础之上提供可…

项目进展(三)-电机驱动起来了,发现了很多关键点,也遇到了一些低级错误,

一、前言 昨天电机没有驱动起来,头发掉一堆,不过今天,终于终于终于把电机驱动起来了!!!!,特别开心,哈哈哈哈,后续继续努力完善!!&…

ChainForge:衡量Prompt性能和模型稳健性的GUI工具包

ChainForge是一个用于构建评估逻辑来衡量模型选择,提示模板和执行生成过程的GUI工具包。ChainForge可以安装在本地,也可以从chrome浏览器运行。 ChainForge可以通过聊天节点对多个对话可以使用不同的llm并行运行。可以对聊天消息进行模板化,并…

计算机毕业设计 基于SSM的在线预约导游系统的设计与实现 Java实战项目 附源码+文档+视频讲解

博主介绍:✌从事软件开发10年之余,专注于Java技术领域、Python人工智能及数据挖掘、小程序项目开发和Android项目开发等。CSDN、掘金、华为云、InfoQ、阿里云等平台优质作者✌ 🍅文末获取源码联系🍅 👇🏻 精…

如何使用 Bing Image Creator 创建图像(DALL-E3)

Bing Image Creator 是一个由微软开发的人工智能图像生成工具,可以根据用户的文字描述生成逼真的图像。该工具使用了 OpenAI 的 DALL-E 3 模型,可以生成各种各样的图像,包括人物、动物、场景、物体等。 使用 Bing Image Creator 创建图像 要…

【docker】数据卷和数据卷容器

一、如何管理docker容器中的数据? 二、数据卷 1、数据卷原理 将容器内部的配置文件目录,挂载到宿主机指定目录下 数据卷默认会一直存在,即使容器被删除 宿主机和容器是两个不同的名称空间,如果想进行连接需要用ssh,…

计算机竞赛 深度学习火车票识别系统

文章目录 0 前言1 课题意义课题难点: 2 实现方法2.1 图像预处理2.2 字符分割2.3 字符识别部分实现代码 3 实现效果4 最后 0 前言 🔥 优质竞赛项目系列,今天要分享的是 🚩 图像识别 火车票识别系统 该项目较为新颖,适…

1800_vim的宏录制功能尝试

全部学习信息汇总: GreyZhang/editors_skills: Summary for some common editor skills I used. (github.com) 最近5年多来,我emacs的编辑器用的还是比较多的。我的配置基本上是一个spacemacs,然后根据自己的需求增加了一丁点儿的其他配置。而…

IntelliJ IDEA配置Cplex12.6.3详细步骤

Cplex12.6.3版IntelliJ IDEA配置详细步骤 一、Cplex12.6.3版下载地址二、Cplex安装步骤三、IDEA配置CPLEX3.1 添加CPLEX安装目录的cplex.jar包到项目文件中3.2 将CPLEX的x64_win64文件夹添加到IDEA的VM options中 四、检查IDEA中Cplex是否安装成功卸载Cplex 一、Cplex12.6.3版下…

【C语言】八大排序算法

文章目录 一、冒泡排序1、定义2、思想及图解3、代码 二、快速排序1、hoare版本2、挖坑法3、前后指针法4、非递归快排5、快速排序优化1)三数取中选key值2)小区间优化 三、直接插入排序1、定义2、代码 四、希尔排序1、定义2、图解3、代码 五、选择排序1、排…

Eyeshot Fem 2023.3 Crack Eyeshot Ultimate

添加新的 PrintSimulationMesh 和 MultiFastMesh 实体并改进 NURBS 曲面三角测量。 2023 年 10 月 4 日 - 11:09新版本 特征 PrintSimulationMesh 实体预览。MultiFastMesh 实体预览。FEM 模态分析预览。有限元分析结果的动画。assemblySelectionType.Leaf 模式下的几何选择。编…

微信朋友圈还可以这么玩?

微信“朋友圈”除了日常了解好友动态外,就是时不时分享下自己的生活日常! 但你知道吗,其实朋友圈还有许多有趣的玩法,只可惜只有“少数人”知晓!一起来看看吧 01 关闭个性化“朋友圈”广告 微信作为我们生活的社交圈&…

竞赛选题 深度学习 opencv python 实现中国交通标志识别

文章目录 0 前言1 yolov5实现中国交通标志检测2.算法原理2.1 算法简介2.2网络架构2.3 关键代码 3 数据集处理3.1 VOC格式介绍3.2 将中国交通标志检测数据集CCTSDB数据转换成VOC数据格式3.3 手动标注数据集 4 模型训练5 实现效果5.1 视频效果 6 最后 0 前言 🔥 优质…

【一、灵犀考试系统项目设计、框架搭建】

一、创建数据库 1、打开power designer,新建数据库模型 2、新建数据表,以及关系 【注意】 图片的类型有两种:varbinary 和 image varbinary : 二进制字节流,可以自动控制长度 image : 最大可放2G图片 3、创建数据库&#…

Win11 安装 Vim

安装包: 链接:https://pan.baidu.com/s/1Ru7HhTSotz9mteHug-Yhpw?pwd6666 提取码:6666 双击安装包,一直下一步。 配置环境变量: 先配置系统变量中的path: 接着配置用户变量: 在 cmd 中输入…

VUE3照本宣科——路由与状态管理器

VUE3照本宣科——路由与状态管理器 前言一、路由(router)1.createRouter2.router-link3.router-view4.useRoute5.useRouter6.路由守卫7.嵌套路由 二、状态管理器(Pinia)1.定义Store(1)Option Store&#x…