问题
写了一个菜单，利用的动态路由，我第一次从首页跳转的时候，获取到了内容，但再次回到首页或者再次跳转到其他菜单，页面内容没有变化，打开network，发现请求都没有发送。
App.vue文件内容如下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
| <template>
<div id="app">
<div id="header">
<router-link to="/"> <img src="blog-logo.png" alt="logo" class="logo"></router-link>
<div id="menu_1">
<p>Ryan's Blog</p>
<ul class="top_menu">
<li><router-link to="/blog/linux">Linux</router-link></li>
<li><router-link to="/blog/python">Python</router-link></li>
<li><router-link to="/blog/django">Django</router-link></li>
<li><router-link to="/blog/jmeter">Jmeter</router-link></li>
<li><router-link to="/blog/robotframework">Robotframework</router-link></li>
<li><router-link to="/blog/tools">Tools</router-link></li>
<li><router-link to="/blog/test">Test</router-link></li>
</ul>
</div>
<div id="menu_2">
<searchbar/>
</div>
</div>
<div id="body">
<div id="content">
<router-view/>
</div>
</div>
</div>
</template>
|
对应路由的vue文件script内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| mounted() {
let category_type = this.$route.params.categorytype;
this.user_url = '/api/blog/blog_list';
const result =new RequestUtils(this.user_url,
{
"category_type": category_type,
"page": this.currentPage,
"size": this.pagesize
});
result.get_method()
.then((response) => {
if (response.data["code"] === "0"){
if (response.data["data"]["blog_list"].length>0) {
this.blog_list = response.data["data"]["blog_list"];
this.total_nums = response.data["data"]["total_nums"];
this.should_show = true;
}else this.should_show = false;
}
else {
this.should_show = false;
this.$message.error("出错了: "+response.data["data"]);
}
})
.catch((error) => {
this.$message.error(error)
});
}
|
原因
百度一番得到了回答：某个路由已经在本地加载过了，即已经将生命周期走到了mounted的时候，如果我们再进入这个页面，不会再执行created和mounted里面的方法。 （https://blog.csdn.net/zemprogram/article/details/95759634）
需要写一个监听方法，当url发生变化自动执行其下代码。
解决方法
改造一下代码，首先把发请求这块放在methods里，如get_blog_list，mounted中执行get_blog_list保证首次进入没问题。
然后在watch中监听$route，一旦变化，执行get_blog_list方法，保证发送了请求。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| mounted() {
this.get_blog_list()
},
watch: {
'$route':'get_blog_list'
},
methods: {
get_blog_list: function(){
let category_type = this.$route.params.categorytype;
this.user_url = '/api/blog/blog_list';
const result =new RequestUtils(this.user_url,
{
"category_type": category_type,
"page": this.currentPage,
"size": this.pagesize
});
result.get_method()
.then((response) => {
if (response.data["code"] === "0"){
if (response.data["data"]["blog_list"].length>0) {
this.blog_list = response.data["data"]["blog_list"];
this.total_nums = response.data["data"]["total_nums"];
this.should_show = true;
}else this.should_show = false;
}
else {
this.should_show = false;
this.$message.error("出错了: "+response.data["data"]);
}
})
.catch((error) => {
this.should_show = false;
this.$message.error(error)
});
},
|
