前提: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. 蔚来杯2022牛客暑期多校训练营7 CFGJ

    比赛链接 C 题解 方法一 知识点:思维. 先统计没有出现的数,每个都可以随便放,所以作为补位用的. 将原数组左移一位作为预定的答案数组,然后开始检查.如果和原数组一样,则用补位数字填充,如果不一样就 ...

  2. Springboot Jpa: [mysql] java.sql.SQLException: Duplicate entry 'XXX' for key 'PRIMARY'

    前言 1.问题背景 偶尔会出现登录请求出错的情况,一旦失败就会短时间内再也登录不上,更换浏览器或者刷新可能会暂时解决这个问题. 项目运行日志如下: 2022-07-21 09:43:40.946 DE ...

  3. 不会提交 PR 的小伙伴看过来,超详细的视频教程!

    点击上方 蓝字关注我们 作者 | 严天奇 ✎ 编 者 按 最近有一些新加入社区的朋友反馈不太了解 Apache DolphinScheduler 提交 PR 的步骤和规则.这不,人帅心美的严天奇同学就 ...

  4. BZOJ4580/Luogu3147 [Usaco2016 Open]248

    amazing #include <iostream> #include <cstdio> #include <cstring> #include <algo ...

  5. MySQL编译安装-出现错误提示

    环境: 系统:centos7.6 MySQL:5.6.3 cmake:2.8.6 原因: 安装ncurses-devel运行环境 [root@localhost ~]# yum -y install ...

  6. CSS 笔记目录

    布局 CSS 布局(一):Flex 布局 选择器 CSS 选择器(一):属性选择器 CSS 选择器(二):子代选择器(>)

  7. FormData 和表单元素(form)的区别

    Form 元素 <form>元素表示文档中的一个区域,此区域包含交互控件,用于向 Web 服务器提交信息(文件.字符).下面称之为表单元素或表单. 要向 Web 服务器提交信息,我们必须要 ...

  8. 定时器控制单只LED灯

    点击查看代码 #include <reg51.h> #define uchar unsigned char #define uint unsigned int sbit LED=P0^0; ...

  9. flutter系列之:移动端的手势基础GestureDetector

    目录 简介 Pointers和Listener GestureDetector 手势冲突 总结 简介 移动的和PC端有什么不同呢?同样的H5可以运行在APP端,也可以运行在PC端.两者最大的区别就是移 ...

  10. 因势而变,因时而动,Go lang1.18入门精炼教程,由白丁入鸿儒,Go lang泛型(generic)的使用EP15

    事实上,泛型才是Go lang1.18最具特色的所在,但为什么我们一定要拖到后面才去探讨泛型?类比的话,我们可以想象一下给小学一年级的学生讲王勃的千古名篇<滕王阁序>,小学生有多大的概率可 ...