vue.js访问此$已装入函数中的route.params

Question

我正在尝试按导演ID过滤电影表。电影的结构是：

{
id: 1,
title: "They All Lie",
releaseYear: 1989,
director: {
id: 18,
firstName: "Darci",
lastName: "Overill",
nationality: "China",
birthdate: "07/13/1973",
},
},

我想使用$route.params.id筛选该表。我有以下代码：

<script>
import axios from "axios";
export default {
data: function () {
return {
directorId: this.$route.params.id,
director: {},
movies: [],
};
},
mounted: function () {
this.getDirector();
this.getMovies();
},
methods: {
getMovies: function () {
let url = "http://localhost:8080/movies/movies";
axios.get(url).then((response) => {
this.movies = response.data;
});
},
getDirector: function () {
let url = "http://localhost:8080/movies/directors/" + this.directorId;
axios.get(url).then((response) => {
this.director = response.data;
});
},
},
computed: {
filteredMovies: function () {
var v = this.$route.params.id;
alert(v);
return this.movies.filter(movie => movie.director.id === v);
},
}

};
</script>

我正在尝试访问filteredMovies函数中的this.$route.params.id。它在.aalert函数中工作，但我无法使return this.movies.filter(movie => movie.director.id === v);工作。过滤不起作用。有什么想法吗？

Answer 1

如果您想要一个更优雅的解决方案来解析路由器参数id，请检查：

index.js(路由器文件(

{
path: '/directors/:id',
name: 'Directors',
component: myComponentName,
props: (route) => {
const id = Number.parseInt(route.params.id);
return { id }
}
}

组件.vue

props: {
id: {
required: true,
type: Number,
}

通过以上实现，您可以删除组件中的解析，也可以不这样做：

this.$route.params.id;

现在你可以做：

this.id

并且您已经解析了具有最佳实践的id；(

干杯