vue-router跳转页面的方法

前端之家收集整理的这篇文章主要介绍了vue-router跳转页面的方法前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

官方文档请点击这里

## vue-router

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

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

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

// 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: '',components: { App },router
})

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

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

路由就是这么的简单!

props

父组件向子组件传值

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

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

// 传值用绑定

//JS

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

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

$emit

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

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

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

//JS

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

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

然后建个方法

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

有点乱,欢迎大家来纠正

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的Vue相关文章