vue项目使用vue-router

一、基于webpack-simple构建的vue项目中，怎么集成vue-router？

---

1、搭建vue项目架构
参考链接：https://blog.youkuaiyun.com/marslover521/article/details/80938686
其中从第五步开始构建vue项目

2、配置vue-router

• 2.1 下载

npm install vue-router --save-dev

• 2.2 新建文件夹router
  在src文件夹中创建文件夹router，并在router文件夹中新建index.js文件

• 2.3 配置router，编写router/index.js文件中内容

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'    
	//Home为components文件夹中文件，Home.vue

Vue.use(Router)
Vue.config.productionTip = false;

const router = new Router({
    routes: [
        {
            path: '/home',
            name: 'home',
            component: Home
        },
        {
            path: '*',
            redirect: '/home'
        }
    ]
})
export default router;

• 2.4 修改main.js

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

//路由
import router from './router/index.js'    //引入路由配置文件

Vue.prototype.$echarts = echarts
new Vue({
  el: '#app',
  router,    //new Vue里面加入router项
  render: h => h(App)
})

• 2.5 router-view 展示页面
  在App.vue文件中，通过router-view在template模板中直接引入就可以。

<template>
  <div id="app" class="app">
    <router-view></router-view>
  </div>
</template>

• 2.7 验证

npm run dev

在DOS或者bash窗口运行以上代码查看

参考链接：https://www.jianshu.com/p/748b0f6523f0?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation