做网站 如何注册公司电子商务营销策划方案

设置唯一值 name

在 Vue 组件中，name 属性用于标识组件。确保每个组件的 name 属性是唯一的，这有助于在调试和开发过程中更好地识别组件。

export default {name: 'Merchandise',// 其他代码
}

在 created 调用方法

created 是 Vue 组件的生命周期钩子之一，它在组件实例被创建后立即执行。可以在 created 钩子中调用方法，以确保在页面首次加载时执行该方法。

添加 immediate: true 确保组件创建时立即执行一次
添加 deep: true 深度监听路由变化

export default {name: 'Merchandise',created() {this.getList()},methods: {getList() {// 这里写获取商品列表的逻辑console.log("获取商品列表");}}
}

在 watch 中监听路由

通过 watch 监听 $route 对象的变化，可以在路由路径发生变化时执行特定的逻辑。例如，当路由路径为 /new/merchandise 时，调用 getList 方法。

export default {name: 'Merchandise',created() {this.getList()},watch: {"$route": function () {immediate: true, // 立即执行一次deep: true,      // 深度监听if (this.$route.path == '/new/merchandise') {this.getList()}}},methods: {getList() {// 这里写获取商品列表的逻辑console.log("获取商品列表");}}
}

完整代码示例

以下是一个完整的 Vue 组件示例，展示了如何在 created 钩子中调用方法，并通过 watch 监听路由变化来执行方法。

<script>
export default {name: 'Merchandise',created() {this.getList()},watch: {"$route": function () {immediate: true, // 立即执行一次deep: true,      // 深度监听if (this.$route.path == '/new/merchandise') {this.getList()}}},methods: {getList() {// 这里写获取商品列表的逻辑console.log("获取商品列表");}}
}
</script>

通过以上步骤，可以确保在页面首次加载时以及在特定路由路径下，getList 方法能够正确执行。