6. Vue 编程式导航与历史记录

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')