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 @ 2021-09-15 23:01  ajaXJson  阅读(1432)  评论(0编辑  收藏  举报