route中的fullpath和query

  <!-- 注意3在this.$route中,path只是路径部分,fullPath是完整地址 -->
  <!-- fullPath: "/movie/2?name=zs%20age%3D28" -->
  <!-- path: "/movie/2" -->
  <!-- query: {name: 'zs age=28'} -->

App2.vue

<template>
<div class="app-container">
  <h1>App2 组件</h1>
   
  <!-- 注意3在this.$route中,path只是路径部分,fullPath是完整地址 -->
  <!-- fullPath: "/movie/2?name=zs%20age%3D28" -->
  <!-- path: "/movie/2" -->
  <!-- query: {name: 'zs age=28'} -->
  <router-link to="/movie/2?name=zs age=28">电影2</router-link>
<router-view></router-view>
  <hr />
</div>
</template>

index.js规则

const router = new VueRouter({
  routes: [
  {path:'/movie/:mid',component:Movie,props:true}
  ]
})

movies.vue

打印this

<template>
<div class="movie-container">
      <button @click="showThis">打印this</button>
</div>
</template>

<script>
export default {
name: 'Movie',
methods:{
  showThis(){
    console.log(this);
  }
}
}
</script>

 

posted @   ajaXJson  阅读(1442)  评论(0编辑  收藏  举报
编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 无需6万激活码!GitHub神秘组织3小时极速复刻Manus,手把手教你使用OpenManus搭建本
· Manus爆火,是硬核还是营销?
· 终于写完轮子一部分:tcp代理 了,记录一下
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示