使用vue-router的router-link传递参数（params,query）

使用router-link两种方式传递参数（params,query）

<!-- father.vue -->
<template>
    <div>
        <!-- 路由 -->
        <div>
          <!-- query方式 -->
          <router-link :to="{path:'/page1',query:{username}}">page1</router-link>
          <!-- params方式 -->
          <router-link :to="{name:'page2',params:{username1}}">page2</router-link>
        </div>
        <router-view></router-view>
    </div>
</template>

// father.vue
<script>
export default {
  data() {
    return {
      username:'张三',
      username1:'李四',
    };
  },
};
</script>

路由配置：

// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Page2 from './pages/page2'

Vue.use(Router) //使用vue-router

export default new Router({
    routes:[
        {
            path:"/page1",
            name:"page1",
            component:()=>import('./pages/page1'),
        },
        {
            path:'/page2',
            name:'page2',
            component:Page2
        },
    ]
})

组件接受参数（query）

// page1
<template>
    <div>
        <h1>这是page1{{$route.query.username}}</h1>
    </div>
</template>

页面：

地址栏：

组件接收参数（params）

// page2
<template>
    <div>
        <h1>这是page2{{$route.params.username1}}</h1>
    </div>
</template>

页面：

地址栏：

可以发现地址栏看不到传的参数，若想看到参数可以在传参的时候字符拼接

<router-link :to="'/page2/'+username1">page2</router-link>

在路由配置也加上穿的参数的名字

// router.js
{
    path:'/page2/:username1',
    name:'page2',
    component:Page2
},

组件接收：

// page2
<template>
    <div>
        <h1>这是page2{{$route.params.username1}}</h1>
    </div>
</template>

地址栏：