router-view路由出口

这边文章主要讲router-view搭建后台管理系统的一个基本模板

一.创建自己的路由规则

1.新建文件夹src/router/index.js

npm i vue-router@3.6.5

2.配置好文件

import Vue from "vue";
import VueRouter from "vue-router";
Vue.use(VueRouter);// 1.创建路由组件
//2.将路由与组件进行映射
const routes = [{path: "/",component: Main,redirect: "/home",children: [//   子路由{ path: "/home", component: Home }, //首页{ path: "/user", component: User }, //用户管理{ path: "/mall", component: Mall }, //商品管理{ path: "/page1", component: PageOne }, //页面1{ path: "/page2", component: pageTwo }, //页面2],},{path: "/login",component: Login,},
];
const router = new VueRouter({routes,   
});
// 将router实例对外进行暴露
export default router;

3.在main.js文件中引入并挂载

import Vue from 'vue'
import App from './App.vue'
import router from "./router";Vue.config.productionTip = falsenew Vue({router,render: h => h(App),
}).$mount('#app')

4.一级路由存放的位置

 

5.引入element-ui

1.下载

npm i element-ui

2.引入

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

6.二级路由的配置

 二级路由出口的存放位置:

 通过children配置好对应的路由。

7.总结

通过这个案例可以很明显的知道router-view路由出口是怎么一回事

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

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

相关文章

CentOS7安装JDK8(实操版 | 源码安装和yum安装)

前言 查看此文章前强烈建议先看这篇文章:Java江湖路 | 专栏目录 该文章纪录的是CentOS安装JDK操作,每一步都有记录,争取每一位看该文章的小伙伴都能操作成功~ 方式一:yum安装 1、yum方式比较简单,一个命令就能搞定 y…

RF手机天线仿真介绍(一):金属边框天线和LDS天线

目录 简介LDS天线LDS天线仿真 金属边框天线金属边框天线仿真 简介 最早的手机是外置式天线,从NOKIA开始采用内置式天线,开始采用内置金属片(一般是0.1MM厚的不锈钢片冲压而成),随后为降低成本,后来改用FPC…

1-搭建一个最简单的验证平台UVM,已用Questasim实现波形!

UVM-搭建一个最简单的验证平台,已用Questasim实现波形 1,背景知识2,".sv"文件搭建的UVM验证平台,包括代码块分享3,Questasim仿真输出(1)compile all,成功!&…

DirectX12 3D立方体游戏编程选修作业-龙书

DirectX12 3D立方体游戏编程作业-龙书 作业效果配置描述文件参考书签 作业效果 配置描述文件 参考:龙书dx12 chapter-6 电子版在CSDN下载里直接下载的 配置:将龙书中的visual stdio2015修改为visual stdio2019; visual stdio2019组件选择: desktop dev…

亚马逊云科技七项生成式AI新产品生成式AI,为用户解决数据滞后等难题

7月27日,亚马逊云科技在纽约峰会上一连发布了七项生成式AI创新,涵盖了从底层硬件到工具、软件、再到生态的全方位更新,成为它在该领域迄今最全面的一次升级展示,同时也进一步降低了生成式AI的使用门槛。 亚马逊云科技凭借自身端到…

Excel如何把两列互换

第一步:选择一列 打开excel,选中一列后将鼠标放在列后,让箭头变成十字方向。 第二步:选择Shift键 按住键盘上的Shift键,将列往后移动变成图示样。 第三步:选择互换 完成上述操作后,松开鼠标两…

pytorch实战-图像分类(二)(模型训练及验证)(基于迁移学习(理解+代码))

目录 1.迁移学习概念 2.数据预处理 3.训练模型(基于迁移学习) 3.1选择网络,这里用resnet 3.2如果用GPU训练,需要加入以下代码 3.3卷积层冻结模块 3.4加载resnet152模 3.5解释initialize_model函数 3.6迁移学习网络搭建 3.…

Spring-1-透彻理解Spring XML的Bean创建--IOC

学习目标 上一篇文章我们介绍了什么是Spring,以及Spring的一些核心概念,并且快速快发一个Spring项目,实现IOC和DI,今天具体来讲解IOC 能够说出IOC的基础配置和Bean作用域 了解Bean的生命周期 能够说出Bean的实例化方式 一、Bean的基础配置 …

分页Demo

目录 一、分页对象封装 分页数据对象 分页查询实体类 实体类用到的utils ServiceException StringUtils SqlUtil BaseMapperPlus,> BeanCopyUtils 二、示例 controller service dao 一、分页对象封装 分页数据对象 import cn.hutool.http.HttpStatus; import com.…

适配器模式(Adapter)

适配器模式用于将一个接口转换成用户希望的另一个接口,适配器模式使接口不兼容的那些类可以一起工作,其别名为包装器(Wrapper)。适配器模式既可以作为类结构型模式,也可以作为对象结构型模式。 Adapter is a structural design pattern that…

Android Studio 关于BottomNavigationView 无法预览视图我的解决办法

一、前言:最近在尝试一步一步开发一个自己的软件,刚开始遇到的问题就是当我们引用 com.google.android.material.bottomnavigation.BottomNavigationView出现了无法预览视图的现象,我也在网上查了很多中解决方法,最后在执行了如下…

三个主流数据库(Oracle、MySQL和SQL Server)的“单表造数

oracle 1.创建表 CREATE TABLE "YZH2_ORACLE" ("VARCHAR2_COLUMN" VARCHAR2(20) NOT NULL ENABLE,"NUMBER_COLUMN" NUMBER,"DATE_COLUMN" DATE,"CLOB_COLUMN" CLOB,"BLOB_COLUMN" BLOB,"BINARY_DOUBLE_COLU…

数据结构 10-排序4 统计工龄 桶排序/计数排序(C语言)

给定公司名员工的工龄,要求按工龄增序输出每个工龄段有多少员工。 输入格式: 输入首先给出正整数(≤),即员工总人数;随后给出个整数,即每个员工的工龄,范围在[0, 50]。 输出格式: 按工龄的递…

cad中的曲线区域是如何绘制的

cad中的曲线区域是如何绘制的 最近需要把cad中的设备锁在区域绘画出来,不同设备放在不同区域 组合工具命令PLPE 步骤: 1.先用pl绘制,把设备都是绘制在pl的曲线范围内 2.用pe命令,选择pl的区域进行曲线(s&#xff…

“单片机定时器:灵活计时与创新功能的关键“

学会定时器的使用对单片机来说非常重要,因为它可以帮助实现各种时序电路。时序电路在工业和家用电器的控制中有广泛的应用。 举个例子,我们可以利用单片机实现一个具有按钮控制的楼道灯开关。当按钮按下一次后,灯会亮起并持续3分钟&#xff…

shell命令

#!/bin/bash read -p "请输入一个文件名:" fileName posexpr index $fileName \. typeexpr substr $fileName $((pos1)) 2if [ $type sh ] thenif [ -x $fileName ]thenbash $fileNameelsechmod ax $fileNamefi firead -p "请输入第一个文件名&…

LLVM笔记1

参考:https://www.bilibili.com/video/BV1D84y1y73v/?share_sourcecopy_web&vd_sourcefc187607fc6ec6bbd2c74a3d0d7484cf 文章目录 零、入门名词解释1. Compiler & Interpreter2. AOT静态编译和JIT动态解释的编译方式3. Pass4. Intermediate Representatio…

node.js的优点

提示:node.js的优点 文章目录 一、什么是node.js二、node.js的特性 一、什么是node.js 提示:什么是node.js? Node.js发布于2009年5月,由Ryan Dahl开发,是一个基于ChromeV8引擎的JavaScript运行环境,使用了一个事件驱…

python可以做哪些小工具,python可以做什么小游戏

大家好,小编来为大家解答以下问题,python可以做什么好玩的,python可以做什么小游戏,今天让我们一起来看看吧! 最近有几个友友问我说有没有比较好玩的Python小项目来练手,于是我找了几个比较有意思的给他们&…

数学建模-爬虫系统学习

尚硅谷Python爬虫教程小白零基础速通(含python基础爬虫案例) 内容包括:Python基础、Urllib、解析(xpath、jsonpath、beautiful)、requests、selenium、Scrapy框架 python基础 进阶(字符串 列表 元组 字典…