技術標籤：vue開發語言 Javascript

vue帶參路由用法一例
顯示效果：

xzq/xzq_index.vue頁面功能方法：

<template>
  <div>
    行政區程式碼：{{ xzqdm }}
    <p>
      <a  @click="gotoXzq('1111111')">click gotoXzq 1111111</a>
    </p>
    <p>
      <a  @click="gotoXzq('2222222')"
 
>click gotoXzq 2222222</a>
    </p>
  </div>
</template>
<script>
// import * as api from '@/api/ajax'

export default {
  name: "xzq_index",
  data() {
    return {
      xzqdm: "",
    };
  },

  mounted() {
    //獲取帶參路由的引數值
    //debugger;
    this.getCurrentRounterParams
 
();
    //
    var that = this;
    setTimeout(function () {
      that.init();
    }, 100);
  },  
  watch: {
       '$route': 'getCurrentRounterParams'
  },
  methods: {
    init() {},
    getCurrentRounterParams()
    {
       this.xzqdm = this.$router.currentRoute.params.xzqdm;
    },
    gotoXzq(xzqdm)
 
 {
      this.$router.push({
        path: `/xzq/${xzqdm}`,
      });
    },
  },
};
</script>

路由中定義方法：

{ //帶參路由 
    path: '/xzq/:xzqdm',
    component: () => import('@/views/params/xzq/xzq_index'), 
    hidden: true,   
    meta: { title: '行政區帶參路由', noCache: true }
  },

—the—end—