vue-router跳转页面的方法

发布时间：2020-12-17 03:04:12 所属栏目：百科来源：网络整理

导读：使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 href，于是 vue-router 应运而生官方文档请点击这里 ## vue-router 第一步当然是安装了，用npm安装命令第二步在.vue组件里添加标签，格式如下第三步在mai

使用 Vue.js 做项目的时候，一个页面是由多个组件构成的，所以在跳转页面的时候，并不适合用传统的 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里建要改变的值，格式如下

然后建个方法

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

有点乱，欢迎大家来纠正

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!