Vue---this.$route和this.$router这两个对象--都需要在router.js 中配置

// 注意: 在 this 这个组件身上,有 this.$route 和 this.$router

// this.$route 是专门用来获取路由中参数的;

// this.$router 是专门来实现编程式导航的;

// 注意:this.$route和this.$router这两个对象

// this.$route是路由参数对象,所有路由中的参数,params,query都属于他

// this.$router 是一个路由(导航对象),用它方便的使用js 代码,实现路由的前进,后退,跳转到新的url地址

 

1.最简单的

点击事件--@click="goDesc"

methods: {
  
   goDesc() {
     this.$router.push("路径/home/goodsdesc/" + 参数this.goodsinfo.id);
  }
}
 rputer.js--配置
{ path: '/home/goodsinfo/:id', component: GoodsInfo, props: true },
 2.首页tbar跳转---
标签跳转<router-link class="" to="路径/home"></router-link>
需要在router.js配置路由
<router-link tag="div" :to="'/home/goodsinfo/' + item.id" class="goods-item" v-for="item in goodslist" :key="item.id">
 接收:data(){
  return{
    id:this.$route.params.id
  }
}
3.在router.js中国配置路由的时候给组件定义名字属性
// 启用 props 来接收路由的参数
{ path: '路径/home/goodscomment/:id', component: 文件名字GoodsComment, props: true, name: '定义的名字goodscmt' }
 this.$router.push({
        name: "goodscmt",
        params: { id: this.goodsinfo.id }
      });
 
posted @   小白咚  阅读(1712)  评论(0编辑  收藏  举报
编辑推荐:
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗?
· 【译】Visual Studio 中新的强大生产力特性
· 【设计模式】告别冗长if-else语句:使用策略模式优化代码结构
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
点击右上角即可分享
微信分享提示