vue路由传递参数（一）（不跳转页面传递参数）详解

此用法主要适用于单页面中引入一个组件，组件需要根据不同的参数展示不同的数据，不用跳转页面，渲染速度快，达到消耗少，高内聚，低耦合的效果

1:路由里要写传递参数键名 一般在router的文件夹下的index.js中

 {
    path: '/Test',
    name: 'Test',
    component: () => import('../views/Test.vue')
  },
  //1:路由里要写传递参数键名 这个是我们的目标页面
  {
    path: '/Form/:id',
    name: 'Form',
    component: () => import('../views/Form.vue')
  }

2 在 app.vue页面里面写路由，也可以在别的页面写 但是要记得  <router-view />标签

 to="/Form/5 和 to="/Form/6    5，6便是要传递的参数

<template>
  <div id="app">
    <!-- <el-button @click="clickHome">clickHome</el-button>
    <el-button @click="clicktest">clicktest</el-button> -->
    <el-button> <router-link to="/Form/5">clickform(5)</router-link>