在js中，考察获取动态路径参数值，完成在组件中使用$route.params获取参数值，假设在Movie组件中有“电影1”“电影2”“电影3”这三个链接，单击它们会跳转到同一个MovieDetails组件，并展示对应的电影id，用于区分不同id对应的详情页数据

在JavaScript的Vue.js框架中，路由（`vue-router`）是处理页面间导航的核心工具。如果你想在`Movie`组件中获取动态路径参数，比如电影ID，可以按照以下步骤操作：

1. 首先，在`main.js`或配置文件中安装并配置`vue-router`：

npm install vue-router

然后在`main.js`中引入并创建路由器实例：

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = [
  {
    path: '/movie/:movieId', // 动态部分：movieId
    name: 'MovieDetails',
    component: MovieDetails,
  },
  { // Movie组件
    path: '/movie/:name', // 匹配电影名称，非ID
    name: 'Movie',
    component: Movie,
    children: [
      { path: ':id', component: MovieDetails, props: true }, // 子路由匹配详细页
    ],
  },
]

const router = new Router({
  routes,
})

2. 在`Movie`组件内，你可以通过`this.$route.params`来访问动态路径参数：

export default {
  name: 'Movie',
  components: {
    MovieDetails,
  },
  methods: {
    goToDetails(id) {
      this.$router.push(`/movie/${id}`);
    },
  },
}

当你点击“电影1”，“电影2”，“电影3”的链接时，它将传递相应的电影ID作为参数。在`MovieDetails`组件内部，你可以接收这个参数，例如：

export default {
  name: 'MovieDetails',
  props: ['movieId'], // 接收外部传来的id
  data() {
    return {
      movie: null,
    };
  },
  mounted() {
    this.getMovieData(this.movieId); // 获取对应id的电影数据
  },
  // ...其他方法
}

在`getMovieData`中，你可以根据`movieId`去请求或存储对应的数据。