router 传参的参数类型

Vue - router 传参_vue.js

URL scheme 定义 

Vue - router 传参_javascript_02

router - query

<router-link :to="{path:'/profile', query: {name: 't1', age: 18}}">档案</router-link>

<template>
  <div>
    <h2>This is Profile</h2>
    <h3>{{$route.query}}</h3>
    <h3>{{$route.query.name}}</h3>
    <h3>{{$route.query.age}}</h3>
  </div>
</template>

Vue - router 传参_vue.js_03

router - 函数跳转

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link :to="'/user/' + userId">用户</router-link>

    <button @click="userClick">用户</button>
    <button @click="profileClick">档案</button>
    
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'zhangsan'
    }
  },
  methods: {
    userClick() {
      this.$router.push('/user/' + this.userId)
    },
    profileClick() {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'kobe',
          no: 23
        }
      })  
    }
  },
}
</script>

Vue - router 传参_javascript_04