Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)
前提:router已经安装
1、先看router中的index.js文件
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Register from '../views/main/Register'
import Login from '@/views/main/Login'
import Home from '@/views/main/Home'
import HomePage from '@/views/end/HomePage'
import AdminInfo from '@/views/end/AdminInfo'
import UserInfo from '@/views/end/UserInfo'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: '注册页',
component: Register
},
{
path:'/login',
name:'登录页',
component: Login
},
//菜单栏设置
{
path:'/Home',
name: "主界面",
component: Home,
redirect: '/HomePage',
children: [
{
path: '/HomePage',
name: '后台首页',
component: HomePage
},
{
path:'/AdminInfo',
name: '管理员信息界面',
component: AdminInfo
},{
path:'/UserInfo',
name: "用户信息界面",
component: UserInfo
}
]
},
]
})
2、router-link的使用
<template>
<div>
<el-container class="home_container" style="height: 800px">
<el-header>
<div>
<span class="header-left">服装库存管理后台系统</span>
</div>
<div class="header-right" style="margin-right: -70%">
<div class="header-right-left" style="float: left">
<span>当前登录用户</span>:
</div>
<div class="header-right-rigth" style="float: right">
<span>退出登录</span>
</div>
</div>
<div></div>
</el-header>
<el-container>
<el-aside width="150px">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"
><i class="el-icon-s-home"></i>首页信息</template
>
<el-menu-item index="1-1">
<router-link to="/HomePage" style="color: black; text-decoration: none;" >首页信息</router-link>
</el-menu-item>
</el-submenu>
<el-submenu index="2">
<template slot="title"><i class="el-icon-menu"></i>信息展示</template>
<el-menu-item index="2-1">
<router-link to="/AdminInfo" style="color: black; text-decoration: none;">管理员信息</router-link>
</el-menu-item>
<el-menu-item index="2-2">
<router-link to="/UserInfo" style="color: black; text-decoration: none;">用户信息</router-link>
</el-menu-item>
<el-menu-item index="2-3">商品类别</el-menu-item>
<el-menu-item index="2-4">商品详情</el-menu-item>
</el-submenu>
<el-submenu index="3">
<template slot="title"
><i class="el-icon-setting"></i>库存管理</template
>
<el-menu-item index="3-1">货号信息</el-menu-item>
<el-menu-item index="3-2">入库信息</el-menu-item>
<el-menu-item index="3-3">入库详情</el-menu-item>
<el-menu-item index="3-4">出库信息</el-menu-item>
<el-menu-item index="3-4">出库详情</el-menu-item>
</el-submenu>
<el-submenu index="4">
<template slot="title"
><i class="el-icon-unlock"></i>辅助管理</template
>
<el-menu-item index="3-1"
><span><i class="el-icon-unlock"></i></span>
修改密码</el-menu-item
>
</el-submenu>
</el-menu>
</el-aside>
<el-main>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</div>
</template>
<script>
export default {
data() {
return {
menuList: [],
isCollapse: false,
};
},
methods: {},
computed: {},
};
</script>
<style scoped>
/* 去除router-link的下划线 */
/* .router-link-active {
text-decoration: none;
} */
@import "../../assets/css/base.css";
</style>
3、实现的效果
Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)的更多相关文章
- Vue 自定义一个插件的用法、小案例及在项目中的应用
1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象 MyPlugin.install = function (Vue, options) { // 1 ...
- Vue.js搭建路由报错 router.map is not a function,Cannot read property ‘component’ of undefined
错误: 解决办法: 2.0已经没有map了,使用npm install vue-router@0.7.13 命令兼容1.0版本vue 但是安装完之后会出现一个错误: Cannot read prope ...
- vue组件与路由的使用步骤
router:根据不同的地址跳转到不同的页面一.vue-router的使用 1.下载路由模块 npm vue-router --save 2.在router.js中 先引入路由 imp ...
- Vue项目中遇到的问题汇总
一.打包后的打开index.html页面空白的几种情况: 引入的css.js路径报错,此时解决方法:把vue.config.js中的增加publicPath: ‘./’ 或者把原来的baseUrl改为 ...
- 项目中解决实际问题的代码片段-javascript方法,Vue方法(长期更新)
总结项目用到的一些处理方法,用来解决数据处理的一些实际问题,所有方法都可以放在一个公共工具方法里面,实现不限ES5,ES6还有些Vue处理的方法. 都是项目中来的,有代码跟图片展示,长期更新. 1.获 ...
- vue项目中引用echarts的几种方式
准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或 ...
- vue cli3以上的项目中如何使用axois请求本地json文件
首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...
- vuex在项目中使用的一点总结
以下为vue后台管理项目中使用vuex的一点总结,截取了其中部分代码,如有什么错误,还望指出. 1. token 存储 登陆成功之后,需要把获取到的 token 存储到 vuex 中,配合 axios ...
- 我是如何在公司项目中使用ESLint来提升代码质量的
ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具. 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/. ESLint的 ...
- 在 ASP.NET Core 项目中使用 npm 管理你的前端组件包
一.前言 在项目的前端开发中,对于绝大多数的小伙伴来说,当然,也包括我,不可避免的需要在项目中使用到一些第三方的组件包.这时,团队中的小伙伴是选择直接去组件的官网上下载,还是图省事直接在网上搜索,然后 ...
随机推荐
- P1980 计数问题 - 记录
P1980 计数问题 题目描述 试计算在区间 1 到 n的所有整数中,数字x(0 ≤ x ≤ 9)共出现了多少次?例如,在 1到11中,即在 1,2,3,4,5,6,7,8,9,10,11中,数字1出 ...
- ROS机械臂 Movelt 学习笔记5 | MoveIt Commander Scripting
前一讲python接口中提到moveit_commander 包.这个包提供了用于运动规划.笛卡尔路径计算以及拾取和放置的接口. moveit_commander 包还包括一个命令行接口程序movei ...
- Python图像处理丨基于OpenCV和像素处理的图像灰度化处理
摘要:本篇文章讲解图像灰度化处理的知识,结合OpenCV调用cv2.cvtColor()函数实现图像灰度操作,使用像素处理方法对图像进行灰度化处理. 本文分享自华为云社区<[Python图像处理 ...
- 【MySQL】从入门到掌握2-下载安装
上期:[MySQL]从入门到掌握1-一些背景知识 第一章:下载 官网下载地址: https://dev.mysql.com/downloads/mysql/ https://dev.mysql.com ...
- 给定字符串定义char *a = “I love China!”,读入整数n,输出在进行了a = a + n这个赋值操作以后字符指针a对应的字符串
include<stdio.h> include<string.h> int main() { const char *a="I love China!"; ...
- 第六十五篇:Vue的过滤器
好家伙, 过滤器,vue3取消了,只有vue2能用 1.过滤器 过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化. 过滤器可以用在两个地方:插值表达式和v-bind属性绑定. 过 ...
- KingbaseES R3 集群主备切换信号量(semctl)错误故障分析案例
案例说明: 某项目KingbaseES R3 一主一备流复制集群在主备切换测试中出现故障,导致主备无法正常切换:由于bm要求,数据库相关日志无法从主机中获取,只能在现场进行分析:通过对比主备切换时的时 ...
- KFS Oracle RAC 数据解析同步配置方法
一.logminer方式解析 1.数据库配置 - Oracle 1. 数据库中需要先设置 NSL_DATE_FORMAT,命令如下,设置好以后需要重启数据库: ALTER SYSTEM SET NLS ...
- OID 与隐含列
熟悉PostgreSQL的都知道,PG12 开始,不再支持OID伪列.KingbaseES 为了保证与旧版本兼容,特增加了OID 隐含列的支持. R3版本:OID 是整个数据库共用的"序列& ...
- ELK套件部署
前言 经过两周的不断碰壁,版本的选择 最终选择ELK的7.6.1套餐 因为我所需要的的警报插件sentinl也才跟新到7.6.1 运行环境:centos7 需要开放的端口:5601,9200,514( ...