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 相关文章推荐
eval的两组性能测试数据
Aug 17 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
简单介绍JavaScript中字符串创建的基本方法
Jul 07 Javascript
jQuery CSS3相结合实现时钟插件
Jan 08 Javascript
JQ图片文件上传之前预览功能的简单实例(分享)
Nov 12 Javascript
教你如何编写Vue.js的单元测试的方法
Oct 17 Javascript
微信小程序实现下拉菜单切换效果
Mar 30 Javascript
JS实现导航栏楼层特效
Jan 01 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 Javascript
详解Vue中的自定义指令
Dec 07 Vue.js
Vue 修改网站图标的方法
Dec 31 Vue.js
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 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
深入PHP内存相关的功能特性详解
2013/06/08 PHP
php的declare控制符和ticks教程(附示例)
2014/03/21 PHP
PHP MVC框架路由学习笔记
2016/03/02 PHP
php 猴子摘桃的算法
2017/06/20 PHP
laravel实现按时间日期进行分组统计方法示例
2019/03/23 PHP
PHP封装类似thinkphp连贯操作数据库Db类与简单应用示例
2019/05/08 PHP
docker-compose部署php项目实例详解
2019/07/30 PHP
使用javascript访问XML数据的实例
2006/12/27 Javascript
jQuery+jqmodal弹出窗口实现代码分明
2010/06/14 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
div模拟选择框示例代码
2013/11/03 Javascript
如何判断元素是否为HTMLElement元素
2013/12/06 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
2015/09/09 Javascript
jQuery的事件预绑定
2016/12/05 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
让div运动起来 js实现缓动效果
2017/07/06 Javascript
node-sass安装失败的原因与解决方法
2017/09/04 Javascript
关于Vue单页面骨架屏实践记录
2017/12/13 Javascript
详解vue-cli 构建项目 vue-cli请求后台接口 vue-cli使用axios、sass、swiper
2018/05/28 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
pycharm显示远程图片的实现
2019/11/04 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
报社实习生自荐信
2014/01/24 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
2015年街道除四害工作总结
2015/05/15 职场文书
主持人大赛开场白
2015/05/29 职场文书
尼克胡哲观后感
2015/06/08 职场文书
《分数的意义》教学反思
2016/02/20 职场文书
导游词之山西-五老峰
2019/10/07 职场文书
死磕 java同步系列之synchronized解析
2021/06/28 Java/Android
python小型的音频操作库mp3Play
2022/04/24 Python