vue-cli router的使用

Posted 2021-01-16 jamywong

用了很久这个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 显示的子节点于父节点显示