Vue配置Router

1. 基本配置：

直接上代码：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/Hello'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [{
      path: '/',
      name: 'HelloWorld',
      // component: HelloWorld
      component: () =>
        import( /* webpackChunkName: "download" */ '@/components/HelloWorld')
    },
    {
      path: '/hello',
      name: 'hello',
      component: Hello
    }
  ]
})

使用的问题：

1. import Vue from 'vue’和Vue.use(Router)如果不加，页面显示不出来，为空白
2. mode: 'history’不加，默认的是Hash模式，特点是url上会自动加#

2. 传参配置：

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

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/hello/:id',
      name: 'hello',
      component: Hello
    }
  ]
})

调用：http://localhost:8000/hello/5
结果：