在Vue.js框架中，页面之间的跳转是常见的操作，尤其在单页面应用(SPA)中。Vue Router作为Vue.js的官方路由库，提供了方便的方法来处理页面间的跳转和参数传递。下面我们将详细讨论如何在Vue中从一个页面跳转到另一个页面并携带参数。
1. **使用`this.$router.push()`进行页面跳转**
要在Vue组件中实现页面跳转，可以使用`this.$router.push()`方法。这个方法接受一个对象，其中包含`path`或`name`属性来指定目标路由，以及可选的`query`或`params`属性来传递参数。例如：
```javascript
toMallInfo: function(mallCode) {
this.$router.push({
path: '/propertyInfo/mall/mallList',
query: {
mallCode: mallCode
}
});
}
```
在上述代码中，`toMallInfo`函数被用于处理点击事件，它将`mallCode`作为参数传递，并调用`$router.push()`来跳转到`/propertyInfo/mall/mallList`路径，同时在查询参数`query`中添加了`mallCode`。
2. **定义路由配置**
在Vue Router的配置中，你需要确保目标页面的路由已经定义好。通常，这会在Vue应用初始化时完成。例如：
```javascript
const routes = [
// ...
{
path: '/propertyInfo/mall/mallList',
component: MallList,
name: 'mallList'
}
// ...
];
```
这里定义了一个名为`mallList`的路由，对应组件为`MallList`。
3. **接收并使用传递的参数**
当目标页面加载时，可以通过监听`$route`对象的变化来获取传入的参数。在组件的`created()`或`mounted()`生命周期钩子中，你可以调用一个方法来获取这些参数，如`getParams()`：
```javascript
created() {
this.getParams();
},
methods: {
getParams() {
const routerParams = this.$route.query.mallCode;
this.mallInfo.searchMap.mallCode = routerParams;
this.keyupMallName();
}
},
watch: {
'$route': 'getParams'
}
```
在这个例子中，`getParams`方法首先从`$route.query`中提取`mallCode`，然后将其保存在当前组件的数据中。`watch`对象中的`'$route'`监听器确保每当路由变化时，`getParams`都会被调用，从而更新组件状态。
4. **注意事项**
- `path`前的`/`表示绝对路径，没有`/`则表示相对路径。在SPA中，通常推荐使用绝对路径来避免子路由混淆。
- `query`参数会在URL中以`?key=value`的形式显示，而`params`则不会出现在URL中，适用于不希望暴露在URL上的数据。
- 如果你使用的是`name`属性而不是`path`，则在`$router.push()`中传递`name`，而不是`path`，并使用`params`而不是`query`。
总结，Vue.js中实现页面跳转并携带参数主要依赖于`this.$router.push()`方法，结合Vue Router的路由配置，以及在目标页面中通过`$route`对象获取并使用这些参数。正确理解和运用这些知识，可以轻松地实现在Vue应用中的页面导航和数据传递。
