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 显示的子节点于父节点显示

posted @ 2018-10-30 19:40  Jamy  阅读(539)  评论(0编辑  收藏  举报