vue路由如何回退？如何监听路由变化？

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

我想点击Foo1时，隐藏Foo1,显示"我是foo"，然后点浏览器回退按钮回到最初状态（即直只显示Foo1），该如何实现？怎么侦听路由hash变化？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id='app'>
    <h1 >Hello VUE-Route</h1>
    <p>
        <router-link v-on:click='toggle'  to='/foo'>Foo1</router-link>
    </p>
    <router-view></router-view>
</div>

</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>    
<script>
// 1 定义路由组件，可以从其他地方引入
    const Foo={
        template:"<p>我是foo</p>"
    }
//2 定义路由,每个路由包括两个部分，path和component，以数组形式存储
    const routes=[
    {path:"/foo",component:Foo},
    ]
// 3 实例化router
    const router=new VueRouter({
        routes:routes
    })
    //挂载app
    const app=new Vue({
        el:"#app",
        data:{
            ifShow:true
        },
        methods:{
            toggle:function(e){
                alert(22)
                this.ifShow=false
            }
        },
        router:router
    })

</script>
</html>