<h3>1. Vue-router的安装</h3>
通过项目根目录下package.json文件引入vue-router
"dependencies": {
"vue": "^2.3.3",
"vue-router": "^2.2.1",
}
在cmd中使用npm install安装
安装成功后，在项目中node_modules下能找到vue-router文件夹，这样vue-router就被成功安装了
在main.js中通过import引入vue-router组件，并把组件命名为VueRouter
import VueRouter from 'vue-router';
<h3>2. Vue-router的使用</h3>
我们在main.js中通过Vue的use方法调用VueRouter
Vue.use(VueRouter);
接着在main.js中实例化一个VueRouter，并命名为router。这时我们引入两个组件Page1和Page2，通过routes设置每个路由的跳转路径及组件名
import Page1 from './components/page1.vue'
import Page2 from './components/page2.vue'
const router = new VueRouter({
routes: [
{
path: '/page1',
component: Page1
},
{
path: '/page2',
component: Page2
}
]
接着我们将实例化好的router对象绑定到Vue中，并通过render渲染到App这个组件（即项目中的App.vue）
const app = new Vue({
el: '#app',
router,
render: h => h(App)
})
在App.vue中，我们用<router-link>标签设置跳转页面的超链接（作用相当于a 标签），我们用<router-view>标签来承载Page1和Page2显示的内容。
<router-link to="/page1">页面1</router-link>
<router-link to="/page2">页面2</router-link>
<router-view></router-view>
这样一系列操作后，我们就实现了使用vue-router完成单页面应用
点击页面1，访问路径会跳转到page1并且在下方显示page1的内容
点击页面2，访问路径会跳转到page2并且在下方显示page2的内容
