vue-router参数传递

通过query传递

 

 

 

使用$route获取query对象

 

 

 

通过代码跳转路由的方式传递参数

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

<template>   <div id="app">     <router-link to="/home" tag="button" >首页</router-link>     <router-link to="/about" tag="button" >关于</router-link>     <router-link :to="'/user/'+name" tag="button" >用户</router-link>     <!-- <router-link :to="{path: '/profile',query: {id: '111',name: '张三'}}" tag="button">档案</router-link> -->     <button @click="profileClick">档案</button>     <!-- 相当于占位符 -->     <router-view></router-view>   </div> </template>   <script> export default {   name: 'App',   data(){     return{       name: 'zhangsan'     }   },     methods:{       profileClick(){         this.$router.push({           path: '/profile',           query:{           name: '张三',           age: 20         }         })       }     } } </script>   <style> /* #app {   font-family: 'Avenir', Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } */ </style>