Vue-cli3项目案例

新建项目的过程不多说了，参考：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
			}
		]
	}]
})