vue-router在.vue单文件组件式开发中的使用问题

初上手不太熟悉, 在vue-router的官方文档中也没有找到结合单文件组件怎么使用. 通过vux的模板摸索如下规律:

1. 根目录下面的index.html可以不做任何修改;
2. 路由的引入主要是在src目录下的main.js文件中, 示例:

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App'
import Home from './components/HelloFromVux' // 引入各个 .vue文件, 这儿有HelloFromVux.vue和Hello.vue. 这儿省略了.vue后缀, 需要在webpack的配置文件中配置, 后面说.
import Hello from './components/Hello'
Vue.use(VueRouter)  // 单文件组件开发中必须要引入

const routes = [
    {path: '/', component: Home},
    {path: '/hello', component: Hello}
]

const router = new VueRouter({
  routes
})

/* eslint-disable no-new */
new Vue({
  el: '#app-box',
  router,
  render: h => h(App)
}) // .$mount('#app-box')
// .$mount或者 el: 两种方式的mount都可以. 因为是加在在#app-box中的, index.html中的div id需要是app-box

3.项目根目录webpack中配置(webpack.config.js)如下内容可以在import时省略.vue后缀:

  resolve: {
    extensions: ['.js', '.vue', '.json']
  },

1. 那么和在哪儿放呢? 不用放在index.html里面, 在任何一个.vue文件的template里面都可以, 并且不需要在.vue的script里面import vue-router
   例如在app.vue中:

<template>
  <div id="app">
  i am app
  <router-link to='/Hello'>Hello</router-link>
  <router-link to='/'>home</router-link>
    <router-view></router-view>
  </div>
</template>

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

<style lang="less">
</style>