vue跳转页签传参并查询参数的保姆级教程

<el-table v-loading="loading" :data="manageUserNoteList" @selection-change="handleSelectionChange">
 
<el-table-column label="用户ID" align="center" prop="userId">
        <template slot-scope="scope">
          <el-tooltip class="item" effect="dark" content="查找该用户" placement="top-start">
               <router-link style="color: #00aaff;" :to="{name: 'User', params: { userId: scope.row.userId }}">{{scope.row.userId}}</router-link>
           </el-tooltip>
          <!-- <el-link type="primary" :to="{name: 'User', params: { userId: scope.row.userId }}" >{{scope.row.userId}}</el-link> -->
        </template>
</el-table-column>
</el-table>

// 字符串
<router-link to="apple"> to apple</router-link>
// 对象
<router-link :to="{path:'apple'}"> to apple</router-link>
// 命名路由
<router-link :to="{name: 'applename'}"> to apple</router-link>
//直接路由带查询参数query，地址栏变成 /apple?color=red
<router-link :to="{path: 'apple', query: {color: 'red' }}"> to apple</router-link>
// 命名路由带查询参数query，地址栏变成/apple?color=red
<router-link :to="{name: 'applename', query: {color: 'red' }}"> to apple</router-link>
//直接路由带路由参数params，params 不生效，如果提供了 path，params 会被忽略
<router-link :to="{path: 'apple', params: { color: 'red' }}"> to apple</router-link>
// 命名路由带路由参数params，地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>
// 其他方式
<router-link :to="'/system/user/' + scope.row.userId" class="link-type">
  <span>{{ scope.row.userId }}</span>
</router-link>

// 命名路由带路由参数params，地址栏是/apple/red
<router-link :to="{name: 'applename', params: { color: 'red' }}"> to apple</router-link>

export default {
  name: "User",
  components: { Treeselect },
  data() {
  return {}
 created() {
  //每次切换页面重新进入次方法 此方法只用于页面传参根据userid查询用户
  activated () {undefined
      const userId = this.$route.params && this.$route.params.userId;
        //userid是否为空
      if (userId) {
            this.loading = true;
            //赋予userid queryParams查询传入查询的字段  this.$route.params.userId接收的字段参数
            this.queryParams.userId = this.$route.params.userId;
            //我自己的搜索方法
            this.handleQuery();
        }
  },
  methods: {
}
}