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,其余不变;