vue-cli router的使用
用了很久這個vue-cli到現在連入門都算不了,為了防止忘記還是很有必要記一下隨筆的。
關於vue-cli中的router的使用,,
我將所有頁面都存放在components文件夾下,
灰後通過router文件夾下的index.js來做路由的指向
通過指向,用App.vue來進行對router控制
app.vue
===========
<router-link :to="{name:‘about‘}">About</router-link>
<router-link :to="{name:‘version‘}">Version</router-link>
<router-view/>
router->index.js
===========
import Home from ‘@/components/home‘
import About from ‘@/components/about‘
import Version from ‘@/components/version‘
export default new Router({
routes: [
{path: ‘/user/:id‘, component: Home,
children: [
{path: ‘about‘, name: ‘about‘, component: About},
{path: ‘version‘, name: ‘version‘, component: Version}
]
}
]
})
components -> home.vue
作為父級的控件,必須帶有router-view命令,否則無法顯示,
===========
<div>
i am home
<router-view></router-view>
</div>
vue-cli的顯示邏輯為:
================================
App.vue [router-view]
L home.vue [router-view] --父節點-通過router-view來顯示出子節點
L about.vue --children 顯示的子節點於父節點顯示
L version.vue --children 顯示的子節點於父節點顯示
vue-cli router的使用