利用 router.afterEach() 实现点击列表后自动收回

此处接这篇文章 给移动端制作一个按键，点击弹出列表，再点击隐藏列表

移动端为了更好的用户体验，我想让用户点击按钮弹出列表后，点击了列表内容，列表会自动收回。

思路：只要在每次切换路由的时候把列表给关了就好，需要用到 router.afterEach()让它接受一个函数，路由切换时执行。我只要让它改变 menuVisible 的值，即可控制列表是否显示了。

因为 menuVisible 这个变量在 App.vue 里，如果要找到这个变量，要把router.afterEach()放到 App.vue 里，但是放到 App.vue 里我又访问不了 router。所以我要在 src 目录下新建一个 router.ts ，把所有 router 相关的东西都放进去封装好，把 router 导出，就可以在 App.vue 里引用了

在 App.vue 里引入 router 后，就可以使用router.afterEach()来改变 menuVisible 的值来达到我的需求了。

补充： 屏幕宽度小于等于500时，也就是判断为移动端时，切换路由才把 menuVisible 的值改为 false，判断为 pc 时不生效。