vue-router跳转页面的方法


Posted in Javascript onFebruary 09, 2017

使用 Vue.js 做项目的时候,一个页面是由多个组件构成的,所以在跳转页面的时候,并不适合用传统的 href,于是 vue-router 应运而生

官方文档请点击这里

## vue-router

第一步当然是安装了,用npm安装命令

npm install vue-router --save-dev

第二步在.vue组件里添加标签,格式如下

<div id="app">
<p>
  <!-- 使用 router-link 组件来导航. -->
  <!-- 通过传入 `to` 属性指定在main.js文件设置的别名链接,如/1 -->
  <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
  <router-link to="/1">Go to Foo</router-link>
</p>
<!-- 路由出口 -->
<!-- 点击<router-link>的时候指定的页面将渲染在这里 -->
<router-view></router-view>
</div>

第三步在main.js文件里配置路由,格式如下

import VueRouter from 'vue-router'

// 1. 定义(路由)组件。
// 加载组件
import Page01 from './max'

Vue.use(VueRouter)
//全局安装路由功能

// 2. 定义路由
// 每个路由应该映射一个组件。 
const routes = [
 { path: '/1', component: Page01 } 
 //前面to指定的地方 path /1
]

// 3. 创建 router 实例,然后传 `routes` 配置
const router = new VueRouter({
 routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由,
// 从而让整个应用都有路由功能
new Vue({
 el: '#app',
 template: '<App/>',
 components: { App },
 router
})

// 现在,就可以重启试试了!

注意 routes router 是不一样的单词,别眼花了

路由就是这么的简单!

props

父组件向子组件传值

在子组件里添加 prors ,格式如下

props: [
  'rimag',
  'hyaline',
  'levels',
  'ohyaline'
],

然后是在父组件里向子组件里传值,格式如下

//HTML

<nv-nav :rimag=mgse :hyaline=ortiy :levels=vels :ohyaline=orctiy></nv-nav>
// 传值用绑定

//JS

data () {
  return {
   mgse: -20.62,
   orctiy: 0,
   vels: -1,
   ortiy: 0
  }
}

点击后父组件就会将data里的数据绑定到子组件的props里

$emit

子组件改变父组件的值,通过$on将父组件的事件绑定到子组件,在子组件中通过$emit来触发$on绑定的父组件事件

先在父组件里将值绑定给子组件并监听子组件变化,格式如下

//HTML

<nv-nav v-on:child-say="listen"></nv-nav>

//JS

listen: function (mgs, orc, cel, ort) {
 this.mgse = mgs
 this.orctiy = orc
 this.vels = cel
 this.ortiy = ort
}

之后在子组件data里建要改变的值,格式如下

mgs: -20.62,
orc: 0,
cel: -1,
ort: 0

然后建个方法

dis: function () {
 this.$emit('child-say', this.mgs, this.orc, this.cel, this.ort)
}

给某个元属添加点击事件触发刚建的方法

<aside @click="dis"></aside>

有点乱,欢迎大家来纠正

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
Nov 19 Javascript
Node.js模块加载详解
Aug 16 Javascript
Bootstrap表格使用方法详解
Feb 17 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
Vue组件全局注册实现警告框的实例详解
Jun 11 Javascript
layui实现table加载的示例代码
Aug 14 Javascript
详解Angular6 热加载配置方案
Aug 18 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
封装微信小程序http拦截器过程解析
Aug 13 Javascript
JavaScript如何把两个数组对象合并过程解析
Oct 10 Javascript
基于JavaScript实现复选框的全选和取消全选
Feb 09 #Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 #Javascript
js 数据存储和DOM编程
Feb 09 #Javascript
超全面的javascript中变量命名规则
Feb 09 #Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 #Javascript
bootstrapValidator.min.js表单验证插件
Feb 09 #Javascript
js 原型对象和原型链理解
Feb 09 #Javascript
You might like
Terran剧情介绍
2020/03/14 星际争霸
为查询结果建立向后/向前按钮
2006/10/09 PHP
php操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
[原创]PHP字符串中插入子字符串方法总结
2016/05/06 PHP
搭建自己的PHP MVC框架详解
2017/08/16 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
Thinkphp5 自定义上传文件名的实现方法
2019/07/23 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
扩展JS Date对象时间格式化功能的小例子
2013/12/02 Javascript
javascript运行机制之this详细介绍
2014/02/07 Javascript
js获取指定日期周数以及星期几的小例子
2014/06/27 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
jQuery实现按钮点击遮罩加载及处理完后恢复的效果
2016/06/07 Javascript
如何在JS中实现相互转换XML和JSON
2016/07/19 Javascript
推荐三款日期选择插件(My97DatePicker、jquery.datepicker、Mobiscroll)
2017/04/21 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
2017/09/19 jQuery
Three.js利用顶点绘制立方体的方法详解
2017/09/27 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
Angular 组件之间的交互的示例代码
2018/03/24 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
20行python代码的入门级小游戏的详解
2019/05/05 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
Tensorflow安装问题: Could not find a version that satisfies the requirement tensorflow
2020/04/20 Python
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
禁止高声喧哗的标语
2014/06/11 职场文书
新店开张活动方案
2014/08/24 职场文书
大学生学习面向未来的赶考思想汇报
2014/09/12 职场文书
职工宿舍管理制度
2015/08/05 职场文书
浅谈Java父子类加载顺序
2021/08/04 Java/Android