vue路由demo

by 苹果熊

HTML

<script src="https://unpkg.com/vue-router"></script>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
  <nav>
    <router-link to="/">页面1</router-link>
    <router-link to="/page2">页面2</router-link>
    <router-link to="/page3">页面3</router-link>
  </nav>
  <div class="page">
    <router-view></router-view>
  </div>
</div>

JavaScript

const router = new VueRouter({
	routes: [{
  	path: '/',
    component: {
    	template: '<div>this is page1<p @click="goto">点我</p></div>',
      methods: {
        goto() {
          router.push({path: 'page2'})
        }
      }
    }
  },
  {
  	path: '/page2',
    component: {
    	template: '<div>this is page2</div>'
    }
  },
  {
  	path: '/page3',
    component: {
    	template: '<div>this is page3</div>'
    }
  }]
})

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