vue后台管理项目中菜单栏切换的三种方法
第一种方法:vue嵌套路由(二)
<el-menu :default-active="defaultActive" style="min-height: 100%;" theme="dark" router>
<el-menu-item index="manage">
<i class="el-icon-menu"></i>首页
</el-menu-item>
<el-submenu index=''>
<template slot='title'>
<i class="el-icon-document"></i>用户管理
</template>
<el-menu-item index="userList">用户查询</el-menu-item>
<el-menu-item index="userforbid">封号管理</el-menu-item>
<el-menu-item index="userapply">用户申请</el-menu-item>
</el-submenu>
</el-menu>
<el-col :span="20" style="min-height:100%;background:#F2F4F8">
<router-view></router-view>
</el-col>
在js中
{
path:'/manage',
component: manage,
name:'',
children:[{
path:'/userList',
component:userList,
meta: ['用户列表']
}]
}
当我们点击用户查询时,就会跳转到http://localhost:8080/#/userList
第二种方法点击事件
<el-button :plain="true" type="success" @click="goadd"> goadd(){
this.$router.push({ path: '/addcategory' })
}
第三种方法命名路由:
<div id="app">
<h1>Named Routes</h1>
<p>Current route name: {{ $route.name }}</p>
<ul>
<li><router-link :to="{ name: 'home' }">home</router-link></li>
<li><router-link :to="{ name: 'foo' }">foo</router-link></li>
<li><router-link :to="{ name: 'bar', params: { id: 123 }}">bar</router-link></li>
</ul>
<router-view class="view"></router-view>
</div> <template id='home'>
<div>This is Home</div>
</template> <template id='foo'>
<div>This is Foo</div>
</template> <template id='bar'>
<div>This is Bar {{ $route.params.id }}</div>
</template> const Home = { template: '#home' };
const Foo = { template: '#foo' };
const Bar = { template: '#bar' }; const router = new VueRouter({
routes: [
{ path: '/', name: 'home', component: Home },
{ path: '/foo', name: 'foo', component: Foo },
{ path: '/bar/:id', name: 'bar', component: Bar }
]
}); new Vue({ router:router }).$mount('#app');
第四种方法命名视图:
<div id="app">
<router-link to="/">Go to Foo</router-link>
<router-view class="view one"></router-view>
<router-view class="view two" name="a"></router-view>
<router-view class="view three" name="b"></router-view>
</div> <template id='foo'>
<div>This is Foo</div>
</template> <template id='bar'>
<div>This is Bar {{ $route.params.id }}</div>
</template> <template id='baz'>
<div>This is baz</div>
</template> const Foo = { template: '#foo' };
const Bar = { template: '#bar' };
const Baz = { template: '#baz' }; const router = new VueRouter({
routes: [
{
path: '/',
components: {
default:Foo,
a:Bar,
b:Baz
}
}
]
}); new Vue({ router:router }).$mount('#app');
第五种方法
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<!-- 路由出口 -->
<!-- 路由匹配到的组件将渲染在这里 -->
<router-view></router-view>
</div> <template id='foo'>
<p>this is foo!</p>
</template>
<template id='bar'>
<p>this is bar!</p>
</template> // 1. 定义(路由)组件。
// 可以从其他文件 import 进来
const Foo = { template:'#foo' };
const Bar = { template:'#bar' };
// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器,
// 或者,只是一个组件配置对象。
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
];
// 3. 创建 router 实例,然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({ routes:routes });
// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
const app = new Vue({ router:router }).$mount('#app');
引:http://blog.csdn.net/bboyjoe/article/details/52804988
vue后台管理项目中菜单栏切换的三种方法的更多相关文章
- Android中全屏 取消标题栏,TabHost中设置NoTitleBar的三种方法(转)
Android中全屏 取消标题栏,TabHost中设置NoTitleBar的三种方法http://www.cnblogs.com/zdz8207/archive/2013/02/27/android- ...
- Openerp 中打开 URL 的三种 方法
来自:http://shine-it.net/index.php/topic,8013.0.html 最近总结了,Openerp 中打开 URL 的三种 方法: 一.在form view 添加 < ...
- mysql 中添加索引的三种方法
原文:http://www.andyqian.com/2016/04/06/database/mysqleindex/ 在mysql中有多种索引,有普通索引,全文索引,唯一索引,多列索引,小伙伴们可以 ...
- jQuery中detach&&remove&&empty三种方法的区别
jQuery中empty&&remove&&detach三种方法的区别 empty():移除指定元素内部的所有内容,但不包括它本身 remove():移除指定元素内部的 ...
- CSS实现导航条Tab切换的三种方法
前面的话 导航条Tab在页面中非常常见,本文说详细介绍CSS实现导航条Tab的三种方法 布局 根据上图所示,先规定几个定义,上图的模块整体叫做导航,由导航标题和导航内容组成.要实现上图所示的布 ...
- mfc 在VC的两个对话框类中传递参数的三种方法
弄了好久,今天终于把在VC中的对话框类之间传递参数的问题解决了,很开心,记录如下: 1. 我所建立的工程是一个基于MFC对话框的应用程序,一共有三个对话框,第一个对话框为主对话框,所对应的类为CTMD ...
- cocos2dx中创建动画的三种方法
1.最最原始的方法,先创建动画帧,再创建动画打包(animation),再创建动画(animate) 第一步: 创建动画帧:CCSpriteFrame,依赖于原始的资源图片(xx.png,xx.jpg ...
- STM32中AD采样的三种方法分析
在进行STM32F中AD采样的学习中,我们知道AD采样的方法有多种,按照逻辑程序处理有三种方式,一种是查询模式,一种是中断处理模式,一种是DMA模式.三种方法按照处理复杂方法DMA模式处理模式效率最高 ...
- vue中数据请求的三种方法
注意请求可能存在跨域问题,需要去配置好 这三种建议使用axios 1.resource Vue 要实现异步加载需要使用到 vue-resource 库. Vue.js 2.0 版本推荐使用 axios ...
随机推荐
- shell 命令 用户管理
1. 查看保存用户相关信息的文件 [ cat /etc/passwd ] [linux : x : 1000 : 1000 : linux,,, : ...
- override和overload区别
方法重载(overload)实现的是编译时的多态性(也称为前绑定) 方法重写(override)实现的是运行时的多态性(也称为后绑定)
- canvas插入图片设置背景,渐变
##在canvas中插入图片(需要image对象) 1.canvas操作图片时,必须要等图片加载完才能操作 2.drawImage(image, x, y, width, height) 其中 ima ...
- LoadRunner关联通用函数的学习
LoadRunner关联通用函数的学习 写这篇文章的时候,我先声明一下,本BLOG中的文章如果没有写出是转贴的一般就是本人原创. Loadrunner脚本中进行关联的时候,用到了一些函数,作用是把字符 ...
- Mysq 列中存储json格式根据key取value
SELECT DISTINCT (SUBSTRING_INDEX( REPLACE ( 列名称, CONCAT( SUBSTRING_INDEX( 列名称, '"key名称":', ...
- day22_1-课前上节复习+os模块
# ********************day22_1-课前上节复习+os模块 *******************# ********************day22_1-课前上节复习+os ...
- centos一些故障解决方法
1. vmware下虚拟机centos,root登录时候提示鉴定故障解决方法 - lippor - 博客园 https://www.cnblogs.com/lippor/p/5537931.html ...
- UVA 12412 A Typical Homework (a.k.a Shi Xiong Bang Bang Mang)
题目链接:https://vjudge.net/problem/UVA-12412 题目大意 略. 分析 比较大规模的模拟,注意输入输出,浮点数精度,还有排名相同的输出顺序,还有一些边界情况处理. 代 ...
- Python3简介
Python3简介 Python 是一个高层次的结合了解释性.编译性.互动性和面向对象的脚本语言. Python 的设计具有很强的可读性,相比其他语言经常使用英文关键字,其他语言的一些标点符号,它具有 ...
- IoGetTopLevelIrp
学习写驱动,其实,挺无聊,但是也挺有意思的 IoGetTopLevelIrp 今天在看一个文件系统过滤驱动的时候,看到这个函数,它是干嘛的,为什么会有这么个东西 https://msdn.micros ...