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

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

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

路由配置：

// 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>

转载于：https://blog.csdn.net/Dwayne_dw/article/details/86481337