怎么定义vue-router的动态路由?怎么获取传过来的动态参数?

news/2024/7/9 23:50:38 标签: vue.js, javascript, 前端, 前端框架, es6, vue
--可以通过query ,param两种方式

区别: query通过url传参,刷新页面还在    params刷新页面不在了
    params的类型:

  • 配置路由格式:/router/:id
  • 传递的方式:在path后面跟上对应的值
  •  传递后形成的路径:/router/123
javascript"><!-- 动态路由-params -->
 
//在APP.vue中
    <router-link :to="'/user/'+userId" replace>用户</router-link>    
 
//在index.js
     {
    path: '/user/:userid',
    component: User,
    },

跳转方法:

// 方法1:
<router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link>
// 方法2:
this.$router.push({name:'users',params:{uname:wade}})
// 方法3:
this.$router.push('/user/' + wade)

可以通过$route.params.userid 获取你说传递的值

   query的类类型

  •   配置路由格式:/router,也就是普通配置
  •   传递的方式:对象中使用query的key作为传递方式
  •   传递后形成的路径:/route?id=123
    javascript"><!--动态路由-query -->
    //01-直接在router-link 标签上以对象的形式
    <router-link :to="{path:'/profile',query:{name:'why',age:28,height:188}}">档案</router-link>
    /*
        02-或者写成按钮以点击事件形式
        <button @click='profileClick'>我的</button>    
    */
     
     //点击事件
     profileClick(){
       this.$router.push({
            path: "/profile",
            query: {
              name: "kobi",
              age: "28",
              height: 198
            }
          });
     }

    跳转方法:

    javascript">// 方法1:
    <router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
    // 方法2:
    this.$router.push({ name: 'users', query:{ uname:james }})
    // 方法3:
    <router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>
    // 方法4:
    this.$router.push({ path: '/user', query:{ uname:james }})
    // 方法5:
    this.$router.push('/user?uname=' + jsmes)

    可以通过$route.query 获取你说传递的值


http://www.niftyadmin.cn/n/5106545.html

相关文章

超全整理,服务端性能测试-tomcat部署项目/查看日志(细致)

目录&#xff1a;导读 前言一、Python编程入门到精通二、接口自动化项目实战三、Web自动化项目实战四、App自动化项目实战五、一线大厂简历六、测试开发DevOps体系七、常用自动化测试工具八、JMeter性能测试九、总结&#xff08;尾部小惊喜&#xff09; 前言 tomcat部署单项目…

微信小程序中封装请求,使用Async await方法,将异步请求变为同步请求方法

介绍 微信小程序中&#xff0c;很多 API都是异步的&#xff0c;无法同步处理。可以使用高级封装&#xff0c;通过async await方法来同步处理。 方法 在小程序右上角的 详情 里选择 本地设置 , 勾选 ES6转ES5&#xff0c;如下所示&#xff1a; 由于 Async Await 是 ES7语法&a…

分享一下微信小程序开发功能有哪些

在当今数字化时代&#xff0c;智能手机应用程序成为了人们日常生活中不可或缺的一部分。而微信小程序作为腾讯公司的杰出产物&#xff0c;凭借其轻便、快捷、易用等特点&#xff0c;成为了移动应用领域中的一颗璀璨明星。本文将探讨微信小程序开发功能为主题&#xff0c;介绍如…

黄金现货期货各有各的市场

投资黄金要获得高效的收益&#xff0c;投资者应该选择有一定资金杠杆的保证金品种&#xff0c;比如现货黄金和黄金期货就是这样投资方式&#xff0c;投资者都可以通过它们的杠杆来放大自己的收益&#xff0c;但二者始终存在区别&#xff0c;投资者到底该如何选择呢&#xff1f;…

杭州怎么开股票账户佣金手续费最低?找哪家证券公司?

杭州怎么开股票账户佣金手续费最低&#xff1f;找哪家证券公司&#xff1f; 股票开户是指一个人或实体在证券公司或证券交易所注册并开立证券账户&#xff0c;以便购买和出售股票。股票开户需要提供身份证明文件、联系方式、银行账号等信息&#xff0c;并接受有关监管机构的审…

Win10使用nginx,注册到服务设置自启与后台运行,解决 Access is denied 问题

安装 nginx 下载 nginx 官网下载页面&#xff1a;https://nginx.org/en/download.html直接选择当前最新 window 版本的或找到自己需要的版本下载即可 安装使用 下载完成后是有一个压缩包文件&#xff0c;直接解压到自己需要的目录下即可。是免安装的&#xff0c;解压即用简…

倒计时 天时分秒

shijian() {const EndTIME new Date(开始时间变量); // 截止时间const NowTime new Date(); // 开始时间const usedTime EndTIME - NowTime; // 相差的毫秒数const days Math.floor(usedTime / (24 * 3600 * 1000)); // 计算出天数const leavel usedTime % (24 * 3600 * 1…