简单说说如何使用vue-router插件的方法

npm install --save vue-router

<template>
  <div>首页</div>
</template>

<script>
  export default {
    name: "index.vue"
  }
</script>

<style scoped>

</style>

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

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

<style scoped>

</style>

// 引入 Vue 框架
import Vue from 'vue'
import VueRouter from 'vue-router';
//引入 hello.vue 组件
import Hello from './hello.vue'

//加载 vue-router 插件
Vue.use(VueRouter);

/*定义路由匹配表*/
const Routers = [{
  path: '/index',
  component: (resolve) => require(['./router/views/index.vue'], resolve)
},
  {
    path: '/about',
    component: (resolve) => require(['./router/views/about.vue'], resolve)
  }]

//路由配置
const RouterConfig = {
  //使用 HTML5 的 History 路由模式
  mode: 'history',
  routes: Routers
};
//路由实例
const router = new VueRouter(RouterConfig);

 

new Vue({
  el: '#app',
  router: router,
  render: h => h(Hello)
})

{
    path: '/index',
    component: require('./router/views/index.vue')
}

 output: {
    ...
    //chunk 文件名
    chunkFilename:'[name].chunk.js'
  }

 plugins: [//插件
    new ExtractTextPlugin({
      filename: '[name].css',
      allChunks: true
    }),
   ...
  ]

"dev": "webpack-dev-server --open --history-api-fallback --config webpack.config.js",

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

const Routers = [
...
  {//当访问的页面不存在时，重定向到首页
    path: '*',
    redirect: '/index'
  }
]

const Routers = [{
 ...
  {
    path: '/article/:id',
    component: (resolve) => require(['./router/views/article.vue'], resolve)
  }
  ...
]

<template>
  <div>{{$route.params.id}}</div>
</template>

<script>
  export default {
    name: "article",
    mounted() {
      console.log(this.$route.params.id);
    }
  }
</script>

<style scoped>

</style>