Vue组件路由

news2024/10/7 18:24:18

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.coloradmin.cn/o/1062095.html

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

相关文章

YOLOV7改进实操-添加Wise IoU,实现有效提点

1、打开utils->general.py,找到bbox_iou(),345行左右,将下面的与源码进行替换 wiou有三个版本,可以替换,看看哪一个提点多 class WIoU_Scale: monotonous: {None: origin v1True: monotoni…

NEFU数字图像处理(1)绪论

一、简介 1.1什么是数字图像 图像是三维场景在二维平面上的影像。根据其存储方式和表现形式,可以将图像分为模拟图像和数字图像两大类 图像处理方法:光学方法、电子学方法 模拟图像:连续的图像数字图像:通过对时间上和数值上连续…

PHP 选课管理系统mysql数据库web结构apache计算机软件工程网页wamp

一、源码特点 PHP 选课管理系统是一套完善的web设计系统,对理解php编程开发语言有帮助,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。 php 选课管理系统 代码 https://download.csdn.net/download/qq_41221322/88389656 二…

笔记本休眠,USB仍对外供电,关闭方法

如下图的,联想笔记本电脑不紧有对外USB供电功能,还有大对外大电流供电功能(1A,带电池符号的USB)。 如何关闭“关机/休眠时仍对外供电”的功能?比如,让笔记本在休眠时,所连接的USB风…

代码随想录算法训练营第23期day11 | 20. 有效的括号、1047. 删除字符串中的所有相邻重复项 、150. 逆波兰表达式求值

目录 一、(leetcode 20)有效的括号 二、(leetcode 1047)删除字符串中的所有相邻重复项 用栈存放 将字符串直接当成栈 三、(leetcode 150)逆波兰表达式求值 一、(leetcode 20)…

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…

MySQL:温备份和恢复-mysqldump (4)

介绍 温备:同样是在数据库运行的时候进行备份的,但对当前数据库的操作会产生影响。(只可以读操作,不可以写操作) 温备份的优点: 1.可在表空间或数据文件级备份,备份时间短。 2.备份时数据库依然…

智能AI创作系统ChatGPT商业运营版源码+AI绘画系统/支持GPT联网提问/支持Midjourney绘画+Prompt应用+支持国内AI提问模型

一、AI创作系统 SparkAi创作系统是基于OpenAI很火的ChatGPT进行开发的Ai智能问答系统。本期针对源码系统整体测试下来非常完美,可以说SparkAi是目前国内一款的ChatGPT对接OpenAI软件系统。那么如何搭建部署AI创作ChatGPT?小编这里写一个详细图文教程吧&…

纯css实现3D鼠标跟随倾斜

老规矩先上图 为什么今天会想起来整这个呢?这是因为和我朋友吵架, 就是关于这个效果的,就是这个 卡片懸停毛玻璃效果, 我朋友认为纯css也能写, 我则坦言他就是在放狗屁,这种跟随鼠标的3D效果要怎么可能能用纯css写, 然后吵着吵着发现,欸,好像真能用css写哦,我以前还写过这种…

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

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

2023.10.5 文件操作IO 经典例题

目录 例题一 例题二 例题一 扫描指定目录,并找到名称中包含指定字符的所有普通文件(不包含目录),并且后续询问用户是否删除该文件 代码如下: package io;import java.io.File; import java.util.Scanner;//扫描指定目…

无约束优化方法(optimtool.unconstrain)

import optimtool as oo from optimtool.base import np, sp, pltpip install optimtool >2.4.2无约束优化方法(optimtool.unconstrain) import optimtool.unconstrain as ou ou.[方法名].[函数名]([目标函数], [参数表], [初始迭代点])f ( x ) ∑ …

数值分析学习笔记——绪论【华科B站教程版本】

绪论 数值分析概念 用计算机求解数学问题的数值方法和理论 三大科学研究方法 实验理论分析科学计算(用计算机去辅助研究):数值方法计算机 解析解和近似解 解析解:使用数学方法求出或推导出的结果,往往可以求解出…

数据结构和算法——数据结构

数据结构: 线性结构: 顺序存储方式,顺序表 常见的顺序存储结构有:数组、队列、链表、栈 链式存储方式,链表 队列: 队列可以使用数组结构或者链表结构来存储,先入先出,后进后出。…

OK3568 forlinx系统编译过程及问题汇总

1. 共享文件夹无法加载;通过网上把文件夹加载后,拷贝文件很慢,任务管理器查看发现硬盘读写速率很低。解决办法:重新安装vmware tools。 2. 拷贝Linux源码到虚拟机,解压。 3. 虚拟机基本库安装 forlinxubuntu:~$ sudo…

【图像分割】距离正则化水平集演化及其在图像分割中的应用(Matlab代码实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

并网逆变器+VSG控制+预同步控制+电流电流双环控制(Simulink仿真实现)

💥💥💞💞欢迎来到本博客❤️❤️💥💥 🏆博主优势:🌞🌞🌞博客内容尽量做到思维缜密,逻辑清晰,为了方便读者。 ⛳️座右铭&a…

微服务技术栈-初识Docker

文章目录 前言一、Docker概念二、安装Docker三、Docker服务命令四、Docker镜像和容器Docker镜像相关命令Docker容器相关命令 总结 前言 docker技术风靡全球,它的功能就是将linux容器中的应用代码打包,可以轻松的在服务器之间进行迁移。docker运行程序的过程就是去仓…

办公环境中最常用的邮箱是什么?

随着互联网的普及,电子邮件已经成为了人们日常生活和工作中不可或缺的一部分。为了更好地了解办公邮箱的使用情况,我们对不同群体的办公邮箱使用进行了一次调查。本文将为您详细介绍最常用的办公邮箱及其特点。 一、调查背景 本次调查旨在了解中国各行各…