前提: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的使用(在项目中的实际运用方式)的更多相关文章

  1. Vue 自定义一个插件的用法、小案例及在项目中的应用

    1.开发插件 install有两个参数,第一个是Vue构造器,第二个参数是一个可选的选项对象   MyPlugin.install = function (Vue, options) {   // 1 ...

  2. 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 ...

  3. vue组件与路由的使用步骤

    router:根据不同的地址跳转到不同的页面一.vue-router的使用 1.下载路由模块      npm vue-router --save 2.在router.js中 先引入路由    imp ...

  4. Vue项目中遇到的问题汇总

    一.打包后的打开index.html页面空白的几种情况: 引入的css.js路径报错,此时解决方法:把vue.config.js中的增加publicPath: ‘./’ 或者把原来的baseUrl改为 ...

  5. 项目中解决实际问题的代码片段-javascript方法,Vue方法(长期更新)

    总结项目用到的一些处理方法,用来解决数据处理的一些实际问题,所有方法都可以放在一个公共工具方法里面,实现不限ES5,ES6还有些Vue处理的方法. 都是项目中来的,有代码跟图片展示,长期更新. 1.获 ...

  6. vue项目中引用echarts的几种方式

    准备工作: 首先我们初始化一个vue项目,执行vue init webpack echart,接着我们进入初始化的项目下.安装echarts, npm install echarts -S //或   ...

  7. vue cli3以上的项目中如何使用axois请求本地json文件

    首先明确一点,在vue cli3以上的版本中,存放静态资源的文件是public 我刚开始以为是和vue cli2一样需要放在static文件夹下,但是项目中没有这个文件夹,我就自己创建了一个,结果请求 ...

  8. vuex在项目中使用的一点总结

    以下为vue后台管理项目中使用vuex的一点总结,截取了其中部分代码,如有什么错误,还望指出. 1. token 存储 登陆成功之后,需要把获取到的 token 存储到 vuex 中,配合 axios ...

  9. 我是如何在公司项目中使用ESLint来提升代码质量的

    ESLint:你认识我吗 ESLint是一个语法规则和代码风格的检查工具. 和学习所有编程语言一样,想要入门ESLint,首先要去它的官网看看:https://eslint.org/. ESLint的 ...

  10. 在 ASP.NET Core 项目中使用 npm 管理你的前端组件包

    一.前言 在项目的前端开发中,对于绝大多数的小伙伴来说,当然,也包括我,不可避免的需要在项目中使用到一些第三方的组件包.这时,团队中的小伙伴是选择直接去组件的官网上下载,还是图省事直接在网上搜索,然后 ...

随机推荐

  1. P1980 计数问题 - 记录

    P1980 计数问题 题目描述 试计算在区间 1 到 n的所有整数中,数字x(0 ≤ x ≤ 9)共出现了多少次?例如,在 1到11中,即在 1,2,3,4,5,6,7,8,9,10,11中,数字1出 ...

  2. ROS机械臂 Movelt 学习笔记5 | MoveIt Commander Scripting

    前一讲python接口中提到moveit_commander 包.这个包提供了用于运动规划.笛卡尔路径计算以及拾取和放置的接口. moveit_commander 包还包括一个命令行接口程序movei ...

  3. Python图像处理丨基于OpenCV和像素处理的图像灰度化处理

    摘要:本篇文章讲解图像灰度化处理的知识,结合OpenCV调用cv2.cvtColor()函数实现图像灰度操作,使用像素处理方法对图像进行灰度化处理. 本文分享自华为云社区<[Python图像处理 ...

  4. 【MySQL】从入门到掌握2-下载安装

    上期:[MySQL]从入门到掌握1-一些背景知识 第一章:下载 官网下载地址: https://dev.mysql.com/downloads/mysql/ https://dev.mysql.com ...

  5. 给定字符串定义char *a = “I love China!”,读入整数n,输出在进行了a = a + n这个赋值操作以后字符指针a对应的字符串

    include<stdio.h> include<string.h> int main() { const char *a="I love China!"; ...

  6. 第六十五篇:Vue的过滤器

    好家伙, 过滤器,vue3取消了,只有vue2能用 1.过滤器 过滤器(Filters)是vue为开发者提供的功能,常用于文本的格式化. 过滤器可以用在两个地方:插值表达式和v-bind属性绑定. 过 ...

  7. KingbaseES R3 集群主备切换信号量(semctl)错误故障分析案例

    案例说明: 某项目KingbaseES R3 一主一备流复制集群在主备切换测试中出现故障,导致主备无法正常切换:由于bm要求,数据库相关日志无法从主机中获取,只能在现场进行分析:通过对比主备切换时的时 ...

  8. KFS Oracle RAC 数据解析同步配置方法

    一.logminer方式解析 1.数据库配置 - Oracle 1. 数据库中需要先设置 NSL_DATE_FORMAT,命令如下,设置好以后需要重启数据库: ALTER SYSTEM SET NLS ...

  9. OID 与隐含列

    熟悉PostgreSQL的都知道,PG12 开始,不再支持OID伪列.KingbaseES 为了保证与旧版本兼容,特增加了OID 隐含列的支持. R3版本:OID 是整个数据库共用的"序列& ...

  10. ELK套件部署

    前言 经过两周的不断碰壁,版本的选择 最终选择ELK的7.6.1套餐 因为我所需要的的警报插件sentinl也才跟新到7.6.1 运行环境:centos7 需要开放的端口:5601,9200,514( ...