Vue学习笔记【27】——Vue路由(设置路由)
设置路由高亮
css:
.router-link-active, /* vue-router*/
.myactive {
color: red;
font-weight: 800;
font-style: italic;
font-size: 80px;
text-decoration: underline;
}
js:
var routerObj = new VueRouter({
// route // 这个配置对象中的 route 表示 【路由匹配规则】 的意思
routes: [ // 路由匹配规则
// 每个路由规则,都是一个对象,这个规则对象,身上,有两个必须的属性:
// 属性1 是 path, 表示监听 哪个路由链接地址;
// 属性2 是 component, 表示,如果 路由是前面匹配到的 path ,则展示 component 属性对应的那个组件
// 注意: component 的属性值,必须是一个 组件的模板对象, 不能是 组件的引用名称;
// { path: '/', component: login },
{ path: '/', redirect: '/login' }, // 这里的 redirect(重定向) 和 Node 中的 redirect 完全是两码事
{ path: '/login', component: login },
{ path: '/register', component: register }
],
linkActiveClass: 'myactive'
})
设置路由切换动效
css:
.v-enter,
.v-leave-to {
opacity: 0;
transform: translateX(140px);
}
.v-enter-active,
.v-leave-active {
transition: all 0.5s ease;
}
html:
<transition mode="out-in">
<router-view></router-view>
</transition>
在路由规则中定义参数
在规则中定义参数:
{ path: '/register/:id', component: register }
通过
this.$route.params
来获取路由中的参数:
var register = Vue.extend({
template: '<h1>注册组件 --- {{this.$route.params.id}}</h1>'
});
Vue学习笔记【27】——Vue路由(设置路由)的更多相关文章
- 【Vue学习笔记】—— vue的基础语法 { }
学习笔记 作者:oMing vue v-on: 简称 @ <div id='app'> <button v-on:click='Show1'> </button> ...
- vue学习笔记:vue的认识与特点与获取
Vue了解 Vue:读作 view Vue是一个渐进式框架 与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计. Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整 ...
- vue学习笔记(二)vue的生命周期和钩子函数
前言 通过上一章的学习,我们已经初步的了解了vue到底是什么东西,可以干什么,而这一篇博客主要介绍vue的生命周期和它常用的钩子函数,如果有学过java的园友可能有接触到在学习servlet的时候学过 ...
- AntDesign vue学习笔记(三)嵌套路由使用
本项目目前结构如下 1.Login页面=>MainFrm页面=>MainFrm左部菜单,右边是显示区域可以切换子页面. 2.当点击左部菜单时,右边的子页面随着进行切换. 实现关键代码如下1 ...
- VUE学习笔记之vue cli 构建项目
一.环境搭建: 1.安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了.安装完成之后,打开命令行工具(win+r,然后输入cmd), ...
- vue学习笔记—bootstrap+vue用户管理
vue,读音view,简单易用的前端框架.特点如下: 1.一个mvvm的前端框架,内部做好了html中dom对象和后台用js语言定义的变量的双向绑定 2.中国人尤雨溪维护的个人项目,中文资料多,和go ...
- Vue学习笔记之Vue指令系统介绍
所谓指令系统,大家可以联想咱们的cmd命令行工具,只要我输入一条正确的指令,系统就开始干活了. 在vue中,指令系统,设置一些命令之后,来操作我们的数据属性,并展示到我们的DOM上. OK,接下来我们 ...
- Vue学习笔记之Vue学习前的准备工作
0x00 起步 1.扎实的HTML/CSS/Javascript基本功,这是前置条件. 2.不要用任何的构建项目工具,只用最简单的<script>,把教程里的例子模仿一遍,理解用法.不推荐 ...
- Vue学习笔记之Vue组件
0x00 前言 vue的核心基础就是组件的使用,玩好了组件才能将前面学的基础更好的运用起来.组件的使用更使我们的项目解耦合.更加符合vue的设计思想MVVM. 那接下来就跟我看一下如何在一个Vue实例 ...
- Vue学习笔记之Vue知识点补充
0x00 修饰符 .lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 .你可以添加 lazy 修饰符,从而转变为使用 change 事件进行同步: &l ...
随机推荐
- Linux 统计文件夹下文件个数及目录个数
1. 统计文件夹下文件的个数 ls -l | grep "^-" | wc -l 2.统计文件夹下目录的个数 ls -l | grep "^d" | wc -l ...
- SQL Server 2005 的动态管理视图DMV和函数DMF
优化 的动态管理视图DMV和函数DMF SQL Server 05提供了动态管理视图Dynamic Management Views和函数 Functions,方便了我们对系统运行情况的监控,故障诊断 ...
- phpstudy的80端口被占用问题
1.查看电脑中当前程序占用的端口和程序ID 当phpstudy设置端口号为80时显示占用,在命令行中输入:netstat -ano 就可以看到当前电脑中程序占用的端口和程序ID等等信息 2.查看正在运 ...
- 韩老师CCNA学习笔记
1.MSCONFIG服务里面可以选择隐藏Windows服务,就能看出程序安装的服务.即使显示已停止,仍可能在运行 2.命令行输入netstat -anbo ,显示当前连接和端口,数字显示,以及程序的路 ...
- mysql实现“存在即更新,不存在即插入”
方法1:使用replace关键字 replace是insert的增强版,可以实现插入的数据和已存在的数据发生主键或者唯一键重复,则删除已存在的数据,再实现插入,如果不重复,则直接插入数据. 结合Myb ...
- flask 实现简易图书管理
""" 1.配置数据库 a.导入 SQLalchemy库 b.创建db对象,并配置参数 c.创建数据库 2.添加书和作者的模型 a.模型集成db.Model b.__ta ...
- datatbales 使用笔记
实例: var datatable_obj = null; $(document).ready(function(){ datatable_obj = $('#merchant-list').Data ...
- printf ("%*.*s")
小数点.后“*”表示输出位数,具体的数据来自参数表printf格式字符串中,与宽度控制和精度控制有关的常量都可以换成变量,方法就是使用一个“*”代替那个常量,然后在后面提供变量给“*”. 同样,小数点 ...
- MDX members使用
Members (Set) 函数返回该指定层次结构内所有成员(不包括计算成员)的集: Members (String) 函数返回已指定名称的单个成员. 通常,将 Members (String) 函数 ...
- 通过注册表修改IE的Internet选项
Internet Explorer 安全区域设置存储在以下注册表子项下面: HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\I ...