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 ...
随机推荐
- 论文学习02-《On the Effectiveness of Visible Watermarks》
I. Estimating the Matted Watermark 给定所有图像中的水印当前估计的区域,我们通过观察这些区域图像梯度的一致性来检测出水印梯度,也就是我们通过计算这些区域的图像梯度的中 ...
- redis笔记_源码_简单动态字符串SDS
参照:https://zcheng.ren/sourcecodeanalysis/theannotatedredissourcesds/#sds%E5%B0%8F%E7%BB%93 这里用char b ...
- MySQL基础知识 数据库 数据表
1.数据库结构 库 表 数据 2. sql(structured query language)结构化查询语言 管理数据库 管理表 管理数据 3.数据库 增删改查 增 create database ...
- luogu P1332 血色先锋队[bfs]
题目描述 巫妖王的天灾军团终于卷土重来,血色十字军组织了一支先锋军前往诺森德大陆对抗天灾军团,以及一切沾有亡灵气息的生物.孤立于联盟和部落的血色先锋军很快就遭到了天灾军团的重重包围,现在他们将主力只好 ...
- duilib教程之duilib入门简明教程18.其他
一.超链接按钮 代码很简单,参见360Demo: <Button text="{u}{a}求助{/a}{/u}" showhtml="true&qu ...
- MySql查询分页数据
MySql查询分页数据
- oxyplot 禁止拖动,缩放
<oxy:Plot> IsZoomEnabled= IsPanEnabled=/> IsZoomEnabled= IsPanEnabled=/> 关键代码: IsZoomE ...
- WannaCry结束了? 安专家注册域名掐断病毒传播
腾讯科技讯,(韩依民) 5 月 13 日,席卷全球的勒索病毒 WannaCry(也被称作 WanaCrypt 或 WCry),在今日晚间被互联网安全人员找到阻止其传播的方法. 据北京云纵信息技术有限公 ...
- webpack用了manifest为何还是每次都生成新的vendor?
原来的代码 //用于提取公共代码 new webpack.optimize.CommonsChunkPlugin({ //记得要在开头引入webpack names: ['vendor','manif ...
- UMP系统架构