push跳转页面没有执行created
时间: 2023-08-08 10:13:38 浏览: 29
在vue中,push跳转页面会触发组件的created钩子函数,但是如果在跳转时使用了<keep-alive>标签进行缓存,再次进入页面时不会触发created钩子函数,而是会触发activated钩子函数。如果需要每次都触发created钩子函数,可以在<keep-alive>标签中添加exclude属性,将对应的组件排除在缓存之外。
相关问题
$router.push跳转页面 url地址栏出现乱码
根据提供的引用内容,可以看出在使用`$router.push`进行页面跳转时,如果URL中包含中文字符,可能会出现乱码的情况。为了解决这个问题,可以使用`encodeURI`对中文字符进行编码,在下一个页面加载时使用`decodeURI`对URL进行解码。
以下是一个示例代码,演示了如何使用`$router.push`进行页面跳转并解决URL乱码的问题:
```javascript
// 在当前页面使用$router.push进行页面跳转
this.$router.push({ path: "/index", query: { msg: encodeURI("我是消息") } });
// 在下一个页面加载时获取URL中的参数
created() {
this.msg = decodeURI(this.$route.query.msg);
}
```
在上述代码中,`encodeURI`函数用于对中文字符进行编码,`decodeURI`函数用于对URL进行解码。通过这种方式,可以确保URL中的中文字符不会出现乱码。
this.$router.push跳转页面后并刷新
在Vue.js中,this.$router.push方法只负责路由的跳转,不会触发页面的刷新。如果你希望在页面跳转后进行刷新,可以使用其他方法来实现。
一种常见的方式是,在路由跳转后手动刷新页面。你可以使用window.location.reload()方法来实现页面的刷新,如下所示:
```javascript
// 在路由跳转之后手动刷新页面
this.$router.push('/your-route')
.then(() => {
window.location.reload();
});
```
另一种方式是,在路由配置中添加一个参数,并在路由跳转时更新该参数的值,从而触发页面的刷新。具体实现如下:
首先,在路由配置中添加一个参数(比如叫做refresh),并设置默认值为false:
```javascript
// 路由配置
{
path: '/your-route',
name: 'YourRoute',
component: YourComponent,
meta: {
refresh: false
}
}
```
然后,在路由跳转时更新该参数的值:
```javascript
// 在路由跳转之前更新参数值
this.$router.push({
name: 'YourRoute',
query: {
refresh: true
}
});
```
最后,在组件的created钩子函数中监听该参数的变化,一旦参数值发生变化,就进行刷新操作:
```javascript
// 在组件中监听参数变化,并进行刷新操作
created() {
this.$route.query.refresh && window.location.reload();
}
```
这样做的原理是,通过改变路由参数的值来触发组件的重新创建,从而达到刷新页面的效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)