vue-cli router的使用

標籤：w命令   nbsp   現在   default   lin   index   exp   router   imp   

用了很久這個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的使用