vue带参路由用法一例

灰太狼 2022-10-28 00:54 21阅读 0赞

vue带参路由用法一例  
显示效果：  
![在这里插入图片描述][20210205084638906.png]  
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—

[20210205084638906.png]: /images/20221024/83fdc565dfb14af69d8d8b22dc7345bd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue路由传参

前言之前，查了其他博客，总结一篇,发现貌似不对？？，因此又查了一遍好不容易写了出来。 1.query传参一种是，这样滴。 // 跳转 thi

水深无声/ 2023年10月13日 08:03/ 0 赞/ 100 阅读

相关 vue-03-路由-路由传参

和平时的页面跳转一样，我们可能需要在地址栏上传递某些参数，例如，从商品列表页面，跳转的某个商品的详情页面，这个时候，如果是页面跳转的时候，我们会直接在url上跟上一个商品id，

男娘i/ 2023年07月20日 13:40/ 0 赞/ 89 阅读

相关 vue路由传参动态路由

[vue路由传参的三种基本方式][vue] 现有如下场景，点击父组件的li元素跳转到子组件中，并携带参数，便于子组件获取数据。父组件中： <li v

快来打我*/ 2023年05月29日 13:30/ 0 赞/ 23 阅读

相关 vue路由传参

vue路由跳转页面传参 1、使用路由url携带参数传递主页Main.vue模板脚本 <template> <div class="hell

迷南。/ 2022年11月29日 13:28/ 0 赞/ 431 阅读

相关 vue带参路由用法一例

vue带参路由用法一例显示效果： ![在这里插入图片描述][20210205084638906.png] xzq/xzq\_index.vue页面功能方法：

灰太狼/ 2022年10月28日 00:54/ 0 赞/ 22 阅读

相关 vue 路由传参

this.$router.push({path:'home',name:'主页'params:{id:1}} 或者 <router-link :to="{

àì夳堔傛蜴生んèń/ 2022年05月29日 09:00/ 0 赞/ 401 阅读

相关 vue路由跳转带参

当前页面写法： ![20181116175914968.png][] 目标页面接收参数的写法 ![watermark_type_ZmFuZ3poZW5naGVpdGk_s

超、凢脫俗/ 2022年04月16日 04:22/ 0 赞/ 566 阅读

相关 vue路由传参

在vue中使用插件的步骤 1、引入Vue 2、引入插件 3、使用插件 Vue.use() 当路由配置成功以后Vue中就会多了两个内置组件 <router-view>

雨点打透心脏的1/2处/ 2021年10月26日 15:40/ 0 赞/ 552 阅读

相关 Vue路由跳转+路由传参

之前在原生JS的开发中，我们经常会用到根据某一状态进行页面的跳转。比如：登录成功跳到首页，点击商品列表的某个商品跳转商品详情等。而常见的写法就是： locat

骑猪看日落/ 2021年09月18日 19:10/ 0 赞/ 739 阅读

相关 vue的路由传参

1.使用router-link进行页面按钮跳转路由文件配置 export default new Router({ routes: [

水深无声/ 2021年09月02日 04:07/ 0 赞/ 606 阅读