动态路由传参

App2.vue

<template>
  <div class="app-container">
    <h1>App2 组件</h1>
​
    <router-link to="/movie/1">电影1</router-link>
    <router-link to="/movie/2">电影2</router-link>
    <router-link to="/movie/3">电影3</router-link>  
​
    <!-- <a href="#/movie">电影</a> -->
    <!-- <a href="#/about">关于</a> -->
  <router-view></router-view>
    <hr />
  </div>
</template>

index.js

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

movies.vue

通过this.$route.params.mid拿到动态值

<template>
  <div class="movie-container">
  <h3>Movie 组件{{$route.params.mid}}</h3>
       <button @click="showThis">打印this</button>
  </div>
</template>
​
<script>
export default {
  name: 'Movie',
  methods:{
    showThis(){
      console.log(this);
    }
  }
}
</script>
​
<style  scoped>
.movie-container {
  min-height: 200px;
  
  padding: 15px;
}
</style>
​