SOURCE

const Foo = {
    template: '<div>foo{{count}}<button @click="count++">+</button></div>', data() {
        return {
            count:0
        }
    },
    created() {
        console.dir(this.$router)
        console.dir(this.$route)
    },
    mounted(){
        console.log('挂载')
    }
}
const Bar = {
    template: '<div>Bar{{id}}</div>',
    props:['id'],
     data() {
        return {}
    },
    created() {
        console.dir(this.$router)
        console.dir(this.$route)
    },
    mounted(){
        console.log('挂载')
    }
}

const routes = [
    { path: '/', redirect: '/foo/1'},
    { path: '/foo/:id', component: Foo },
    { path: '/bar/:id', component: Bar,props:true}
]


const router = new VueRouter({
    routes
})

router.beforeEach((to,from,next)=>{
    console.dir(to)
    console.dir(from)
    // console.log('去哪里',to)
})


const app = new Vue({
    router
}).$mount('#app')

<div id="app">
    <h1>hello app！</h1>
    <p>
        <router-link to="/foo/123">Go to Foo</router-link>
        <router-link to="/bar/666">Go to Bar</router-link>
    </p>
    <keep-alive>
        <router-view></router-view>
    </keep-alive>
    
</div>