vue-cli4.0脚手架中路由的配置过程

1.vue create  + 项目名

2.运行命令：npm run serve，默认是这样

3.  - Local:   http://localhost:8081/
  - Network: http://192.168.46.189:8081/

配置路由的过程：

 在src目录下新建router文件夹，然后在router内新建一个index.js文件，目录如下：

index.js文件用于路由的配置：注意是routes,不是routers,是component,不是components

// 配置路由
//第一步应该导入路由插件，vue
import VueRouter from 'vue-router'
import Vue from 'Vue'
import Home from '../components/Home'
import About from '../components/About'

// 2.使用vue.use来安装插件
Vue.use(VueRouter)

// 3.创建vue-router实例化对象，配置路由和组件之间的应用关系
const routes = [
    {
        path: '/home',
        component: Home
    },
    {
        path: '/about',
        component: About
    }
]
const router = new VueRouter({
    // 配置路由和组件之间的应用关系
    routes
})

//4.导出路由
export default router

  main.js,需要导入路由

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 导入到router,会自动找到index
Vue.config.productionTip = false

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

 Home.vue组件：

.<template>
  <div>我是首页</div>
</template>

<script>
export default {
    name: "Home"
}
</script>

<style>

</style>

About.vue组件：

<template>
  <div>我是关于</div>
</template>

<script>
export default {
    name: "About"
}
</script>

<style>

</style>

App.vue

<template>
  <div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/about">关于</router-link>
    //必须挂载到APP上才能显示，标签是内置的
    <router-view></router-view>
    //用于决定显示的位置
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>

</style>