Vue 编程式导航与历史记录

<div id="app">
<button @click="pageFirst">Page First</button>
<button @click="pageSecond">Page Second</button>
</br>
<button @click="goBack">Go Back</button>
<button @click="goForward">Go Forward</button>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

const First = { template: '<div>First Page</div>' } //调用路由name属性
const Second = { template: '<div>Second Page</div>' }
routes = [
{ path:'/first', name:"first" ,component: First },  //设置路由name属性
{ path: '/second', name:"second", component: Second }
]
router = new VueRouter({
routes
})
const app = new Vue({
router,
methods: {
pageFirst(){ router.push('/first') },
pageSecond(){ router.push({ name: 'second' }) },
goForward(){ router.go(1) },
goBack(){ router.go(-1) }
},
}).$mount('#app')