标签：pat params des 属性 显示 back 两种方法 port key
1、路由传值得实现方式
不局限于父子组件，任意得组件之间都可以进行传值使用路由
2、
配置路由文件index.js，告诉浏览器我要传一个什么参数
再router-link得to中设置要传的值是什么
传给谁就在哪个组件中进行数据得接收：this.$route.params.id
$route：用来获取路由得，跳转得路由对象，每一个路由上都会有一个$route对象，是一个局部对象
$router：是VueRouter得一个对象，通过得是路由得构造器得到得router这个对象，是一个全局对象，它包含所有路由
3、不需要对路由文件进行配置，直接使用params参数进行传值(所传得值是不会显示再地址栏中得，换句话来说，你想传什么值就可以传什么值)
直接再router-link得to中进行值得配置即可
需要使用v-bind对to属性进行绑定
4、query进行传值：
再显示是显示再地址栏中得，并且显示得方式是？后边
再接收得时候使用得：this.$route.query.key值进行接收得
案例：
路由表：
import Vue from ‘vue‘ import Router from ‘vue-router‘ import Home from ‘@/components/Home‘ import Gongsi from ‘@/components/gongsi‘ Vue.use(Router) export default new Router({ mode: ‘history‘, routes: [ { path: ‘/‘, name: ‘Home‘, component: Home },{ // path:‘/gongsi/:id‘, // 前两种方法都需要设置ID path:‘/gongsi‘, component:Gongsi, children:[ { path:‘/‘, name:‘gongsi‘, component:GongsiOne } ] }, ] })
路由组件
<template>
<div>
<ul>
<li><router-link to="/">首页</router-link></li>
<!-- 四种传值 -->
<!-- <li><router-link to="/gongsi/aa">公司</router-link></li> 第一种方法-->
<li @click="getDes(aa)"><router-link to="/gongsi">公司</router-link> 第二种方法</li>
<!-- <li><router-link :to="{name:‘gongsi‘,params:{id:aa}}">公司</router-link> </li> 第三种方法-->
<!-- <li><router-link :to="{name:‘gongsi‘,query:{id:aa}}">公司</router-link> </li> 第四种方法 -->
</ul>
</div>
</template>
<script>
export default {
name: ‘Nav‘,
data () {
return {
aa:‘我是nav孙子组件‘,
}
},
methods: {
getDes (id) { //@click事件传值
//需要给当前路由实例添加参数 第二种方法的函数
this.$router.push({ //包含所有路由 一个router对象，在跳转之前
path:‘/gongsi/test‘ + id //同样属于id传值
})
}
}
}
</script>
<style scoped>
div{
background-color:#186;
height :50px;
}
li{
float: left;
margin-right:20px ;
}
</style>
接收组件
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: ‘gongsi‘,
methods:{
},
created () {
console.log(this.$route.params.id) // 前三种方法接收
// this.$route //仅限于当前 用来获取路由,跳转之后获取
console.log(this.$route.query.id) //显示在url上 第三种方法的接收
}
}
</script>
<style scoped>
div{
background-color:#186;
}
</style>
标签：pat params des 属性 显示 back 两种方法 port key
原文地址：https://www.cnblogs.com/taozhibin/p/13190335.html
