vue-router组件间参数相互传递的方法

来源：懂视网责编：小采时间：2020-11-27 19:54:48

vue-router组件间参数相互传递的方法

vue-router组件间参数相互传递的方法:这次给大家带来vue-router组件间参数相互传递的方法，vue-router组件参数相互传递的注意事项有哪些，下面就是实战案例，一起来看一下。通过VueRouter来实现组件之间的跳转：参数的传递，具体内容如下 login ---用户名--->main ①明确发送方和

推荐度：

点击下载本文 文档为doc格式

导读vue-router组件间参数相互传递的方法:这次给大家带来vue-router组件间参数相互传递的方法，vue-router组件参数相互传递的注意事项有哪些，下面就是实战案例，一起来看一下。通过VueRouter来实现组件之间的跳转：参数的传递，具体内容如下 login ---用户名--->main ①明确发送方和

这次给大家带来vue-router组件间参数相互传递的方法，vue-router组件参数相互传递的注意事项有哪些，下面就是实战案例，一起来看一下。

通过VueRouter来实现组件之间的跳转：参数的传递，具体内容如下

①明确发送方和接收方

②配置接收方的路由地址
{path:'/myTest',component:TestComponent}
-->
{path:'/myTest/:id',component:TestComponent}

③接收方获取传递来的数据
this.$route.params.id

④跳转的时候，发送参数
this.$router.push('/myTest/20')
<router-link :to="'/myTest'+id">跳转</router-link>

代码：

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>传参</title>
 <script src="js/vue.js"></script>
 <script src="js/vue-router.js"></script>
 </head>
 <body>
 <p id="container">
 <p>{{msg}}</p>
 <!--指定容器 -->
 <router-view></router-view>
 </p>
 <script>
 //创建主页面组件
 var myMain = Vue.component("main-component",{
 //保存登录传递过来的数据
 data:function(){
 return {
 uName:''
 }
 },
 template:`
 <p>
 <h1>主页面用户名:{{uName}}</h1>
 </p>
 `,
 //挂载该组件时自动拿到数据
 beforeMount:function(){
 //接收参数
 console.log(this.$route.params);
 this.uName = this.$route.params.myName ;
 }
 })
 //创建登录页面组件
 var myLogin = Vue.component("login-component",{
 //保存用户输入的数据
 data:function(){
 return {
 userInput:""
 }
 },
 methods:{
 toMain:function(){
 //跳转到主页面，并将用户输入的名字发送过去
 this.$router.push("/main/"+this.userInput);
 console.log(this.userInput);
 }
 },
 template:`
 <p>
 <h1>登录页面</h1>
 <input type="text" v-model="userInput" placeholder="请输入用户名">
 <button @click="toMain">登录到主页面</button>
 <br>
 <router-link :to="'/main/'+userInput">登录到主页面</router-link>
 </p>
 `
 })
 var NotFound = Vue.component("not-found",{
 template:`
 <p>
 <h1>404 Page Not Found</h1>
 <router-link to="/login">返回登录页</router-link>
 </p>
 `
 })
 //配置路由词典
 const myRoutes = [
 {path:"",component:myLogin},
 {path:"/login",component:myLogin},
 //注意冒号,不用/否则会当成地址
 {path:"/main/:myName",component:myMain},
 //没有匹配到任何页面则跳转到notfound页面
 {path:"*",component:NotFound}
 ]
 const myRouter = new VueRouter({
 routes:myRoutes
 })
 new Vue({
 router:myRouter,
 el:"#container",
 data:{
 msg:"Hello VueJs"
 }
 })
// 注意,路由地址
 </script>
 </body>
</html>

<!doctype html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>传参练习</title>
 <script src="js/vue.js"></script>
 <script src="js/vue-router.js"></script>
 </head>
 <body>
 <p id="container">
 <p>{{msg}}</p>
<!-- -->
 <router-view></router-view>
 </p>
 <script>
//创建产品列表组件
 var myList = Vue.component("product-list",{
 //保存产品列表的数据
 data:function(){
 return{
 productList:["苹果","华为","三星","小米","vivo"]
 }
 },
 template:`
 <p>
 <h4>这是列表页</h4>
 <ul>
 <li v-for="(tmp,index) in productList">
 //将index传递过去
 <router-link v-bind:to="'/detail/'+index">{{tmp}}</router-link>
 </li>
 </ul>
 </p>
 `
 })
//详情页组件 
 var myDetail = Vue.component("product-detail",{
 //保存传递过来的index
 data:function(){
 return{
 myIndex:""
 }
 },
 //在挂载完成后,将接收到的index赋值给myIndex
 mounted:function(){
 this.myIndex = this.$route.params.id;
 },
 template:`
 <p>
 <h4>这是详情页</h4>
 <p>这是id为：{{myIndex}}的产品</p>
 </p>
 `
 })
//页面找不到的时候
 var NotFound = Vue.component("not-found",{
 template:`
 <p>
 <h1>404 Page Not Found</h1>
 </p>
 `
 })
// 配置路由词典
 const myRoutes = [
 {path:"",component:myList},
 {path:"/list",component:myList},
 {path:"/detail/:id",component:myDetail},
 {path:"*",component:NotFound},
 ]
 const myRouter = new VueRouter({
 routes:myRoutes
 })
 new Vue({
 router:myRouter,
 el:"#container",
 data:{
 msg:"Hello VueJs"
 }
 })
 </script>
 </body>
</html>

相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！