vue-cli中使用vue-router

首先在工程内打开cmd使用yarn或npm安装vue-router

安装后，打开文件根目录下package.json看到vue-router:版本号则安装成功

根目录新建一个router.js，对路由进行管理配置

// router.js

import Vue from 'vue'
import Router from 'vue-router' // 引入vue-router
import Page2 from './pages/page2' // 引入组件方式2

Vue.use(Router) //使用vue-router

export default new Router({
    routes:[
        {
            path:"/page1",
            name:"page1",
            component:()=>import('./pages/page1') // 引入组件方式1
        },
        {
            path:'/page2',
            name:'page2',
            component:Page2 // 引入组件方式2
        },
    ]
})

在main.js中引入router.js

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router.js' // router中的r要小写，不然会冲突

Vue.config.productionTip = false

new Vue({
  router, // 引入
  render: h => h(App),
}).$mount('#app')

在组件中使用：

// component.vue