vue-router的基本使用 一、在index.js文件中导入vue和vue-router

import Vue from 'vue' //1、导入 import VueRouter from 'vue-router' 二、模块化机制，使用Router

Vue.use(VueRouter) 三、创建路由器对象

复制代码 const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () ⇒ import(/* webpackChunkName: "about" */ '../views/About.vue') } ]

const router = new VueRouter()

export default router 复制代码 四、在main.js文件中挂载router到vue实例中

new Vue({ router, //4、挂载到vue的实例中 render: h ⇒ h(App) }).$mount('#app') 五、在App.vue中

通过router-link引入组件

  <!-- router-link相当于a标签，to属性相当于href -->
  <router-link to="/">Home</router-link> |
  <router-link to="/about">About</router-link>

通过router-view渲染组件