Vue路由实例

1.App.vue

<template>
  <div id="app">
    <div>
      <!-- router-link导航，通过to属性指定链接，默认渲染一个a标签　 -->
      <router-link to="/page1">Page1</router-link>
      <router-link to="/page2">Page2</router-link>
	// 路由占位符
      <router-view></router-view> 
</template>

2.定义路由组件router.js

// 引入vue
import Vue from 'vue'
// 引入vue-router
import VueRouter from 'vue-router'
//引入路由组件
import page1 from './page1.vue'
import page2 from './page2.vue'
// 使用VueRouter
Vue.use(VueRouter)

//定义routes路由的集合，数组类型，每个路由映射一个组件
const routes = [
    //单个路由均为对象类型，path代表的是路径与to属性对应，component代表路由组件
    { path: '/page1', component: page1 },
    { path: '/page2', component: page2 }
]

//实例化VueRouter
const router = new VueRouter({
    routes
})
export default router

main.js

//引用router.js
import router from './router'
new Vue({
    store,
    router, //注入到vue的实例对象上
    render: h => h(App)
}).$mount('#app')