vue.js router的配置

前言：使用的编辑器是atom

背景：希望阅读者具备下载安装vue.js的知识

装好脚手架的界面

点开src,结构如下，B.vue  C.vue D.vue是我自己写的，后面细讲，主要看APP.vue 和main.js

router就是在APP.vue和main.js配置

代码如下：

main.js:

import Vue from 'vue'
import Router from 'vue-router'
import App from './App.vue'
import Bar from './B.vue'
import C from './C.vue'
import D from './D.vue'

Vue.use(Router)


const User = {
  template: `<div>User {{ $route.params.id }}</div>`
}


const routers = new Router({
  routes : [{
    path : '/boy',
    component:Bar
  },
  {
    path : '/charlie',
    component : C
  },
  {
    path : '/doc',
    component : D
  },
  { path: '/user/:id',
  component: User }
  ]
});


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

蓝色部分为不可更改部分，红色为可以更改的，如果你新写了一个C.vue.首先import,再写{
    path : '/charlie',
    component : C
  },就ok了

我这里是把user写在了内部，可以写在外面作为一个单独的user.vue再引用；

用user来解释动态写router,动态是啥意思呢？比如user有id,username，你需要让他们都在user界面显示，但是后缀又不同

就是user/id    user/username

橙色为user,能替换的就是id，其余不变；