Vue之Router-Link进行页面跳转和传参

传参跳转

router-link的传参：query、params

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

定义路由

import VueRouter from 'vue-router'
import Vue from "vue"
import FrameView from "./components/FrameView"
import LoginView from "./components/LoginView"
import LabelingView from "./components/LabelingView"
import AlgoProcessView from "./components/AlgoProcessView"
import MultiRouteView from "./components/MultiRouteView"

// 嵌套路由
import Index from './components/index'
import Merchant from './components/Merchant'
Vue.use(VueRouter)

const router = new VueRouter({
    routes:[
        {
            path:'/test',
            component:LabelingView,
            name:"LabelingView"
         },
        {
           path:'/frame',
           component:FrameView,
           name:"FrameView"
        },
        {
            path:'/login',
            component:LoginView,
            name:"LoginView"
        },
        {
            path:'/AlgoProcess',
            component:AlgoProcessView,
            name:"AlgoProcessView"
        },
        {
            path: "/",
            component: MultiRouteView,
            // 嵌套路由
            children: [
              {path: "",component: Index,name:"index"},
              {path: "merchant",component: Merchant,name: "merchant"},
            //   {path: "order",component: Order,name:"order"},
            //   {path: "user",component: User,name: "user"},
            //   {path: "merchant/detail",component: MerchantDetail,name: "merchant_detail"},
            ]
          },
    ]
})

// 导出
export default router;

页面接收参数

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

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

js接收参数

xxx = this.$route.query.imgData,