vue 使用router-link跳转页面传参的常用做法

需求：点击渠道商列表页面中的某个按钮跳转到渠道商订单页面，并传递参数123456。

image.png

找到name为channelOrder的页面跳转页面并传参123456

 <router-link :to="{name:'channelOrder',query:{account:'123456'}}">查看订单</router-link>

mounted() {
  var account = this.$route.query.account;// 接收参数
}

拓展： 文件的主要代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)


// 主入口
import MainPage from '../views/MainPage.vue';
import Dad from '../views/Dad.vue';
import ChannelList from '../views/channelList.vue';
import ChannelOrder from '../views/channelOrder.vue';

const routes = [
  {
    path: '/mainPage',
    component: MainPage,
    redirect: '/abstract',
    children: [
      {
        path: '/channelManage',
        meta: {title: '渠道商管理'},
        redirect: '/channelList',
        component: Dad,
        children: [
          {
            path: '/channelList',
            meta: {title: '渠道商列表'},
            component:ChannelList
          },
          {
            path: '/channelOrder',
            name:'channelOrder',
            meta: {title: '渠道商订单'},
            component: ChannelOrder
          },
        ],
      },
    ]
  },
]
const router = new VueRouter({
  routes: routes
})
export default router

文件的主要代码：<router-view ></router-view>一定都要有，否则跳转页面会有问题

<template>
        <router-view ></router-view>
</template>

<script>
export default {
  data() {
    return {
    };
  }
};
</script>
<style>
</style>