新建项目的过程不多说了,参考:https://blog.csdn.net/qq_40323256/article/details/100999860
例1:极简的一个例子
运行结果: 结构目录:
A.vue
<template>
<div>
<h1>这是A页面</h1><br />
<router-link to="/">返回</router-link>
</div>
</template>
B.vue
<template>
<div>
<h1>这是B页面</h1><br />
<router-link to="/">返回</router-link>
</div>
</template>
Home.vue
<template>
<div>
<router-link to="/a">转向A页面</router-link>
<router-link to="/b">转向B页面</router-link>
</div>
</template>
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import A from './views/A.vue'
import B from './views/B.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: Home
},
{
path: '/a',
component: A
},
{
path: '/b',
component: B
}
]
})
App.vue
<template>
<div>
<router-view/>
</div>
</template>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
例2:对比例1
运行结果: 结构目录(和例1一样):
其他代码和例1相同,不同的是Home.vue和router.js,注意体会代码的不同之处
Home.vue
<template>
<div>
<router-link to="/a">转向A页面</router-link>
<router-link to="/b">转向B页面</router-link>
<router-view/>
</div>
</template>
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import A from './views/A.vue'
import B from './views/B.vue'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
component: Home,
children: [{
path: '/a',
component: A
},
{
path: '/b',
component: B
}
]
}]
})