1,安装路由
cnpm install --save vue-router
2,在main.js中,引入路由插件,并使用
import VueRouter from 'vue-router'
Vue.use(VueRouter)
3,导入需要用到的页面
import Page1 from './pages/Page1.vue'
import Page2 from './pages/Page2.vue'
4,在vue中配置路由
new Vue({
router:new VueRouter({
routes:[
{path:'/page1',component:Page1},
{path:'/page2',component:Page2}
]
}),
render: h => h(App)
}).$mount('#app')
5,在需要的地方,调用路由
<p>
<router-link to="/page1">page1</router-link>
<router-link to="/page2">page2</router-link>
</p>
<router-view></router-view>
6,页面中的文件很简单,例如Page1.vue:
<template>
<div>
<p>第1页的内容</p>
</div>
</template>
<script>
</script>
<style>
</style>