vue2 vue-router 组装

适用于vue cli搭建的项目

vue-router模块下载及记录到package.json中:

npm i vue-router -D
main.js中:
import VueRouter from ‘vue-router’   //引入模块
Vue.use(VueRouter)            //使用模块,VueRouter模块里面自带有个install方法,能被Vue.use方法识别。
const router = new VueRouter({        
  routes:[               //参数样式 {routes:[aaa,bbb]} ,必须是routes:xxx
    {path:'/xxx',component:aaa},
    {path:‘/xxx’,component:bbb}
  ]
})
new Vue({
  router  //将router 实例 挂载到new Vue中就能使用了
  
})
//了解上面的内容,就足够了,其余的只是参数的拼接。

改写如下:
import VueRouter from ‘vue-router’
Vue.use(VueRouter)  
import route1 from ‘./router.config.js’ //这儿是router.config.js的路径。如果设置routes为变量名,下面那行代码参数就写:{routes},代表{routes:routes}
const router = new VueRouter({routes:route1}) 

router.config.js中

import aaa from './aaa.vue' //从文件地址引入aaa组件。
import bbb from './bbb.vue' //从文件地址引入bbb组件。

export default[        //依据VueRouter的参数模式 拼接。 由于main.js参数写法,这儿正好输出json格式:[{},{}]
  {
    path:'/home',
    component:aaa
  }
]


使用:

<router-link to='/home'>点击转到aaa组件</router-link>
<router-view></router-view> <!--这儿是显示aaa组件的地方。-->

大概思路:

    引入vue-router模块→Vue.use(模块)→实例化→挂载实例→使用

    实例化的参数:new VueRouter({routes:[{path:'/xxx',component:aaa},{path:‘/xxx’,component:bbb]})

    参数拼接:一般是将json放在config.js中,输出这个json,在main.js中引入这个json,进行拼接。这样做是为了代码清晰。

 

posted @ 2017-04-17 22:19  吃个石头  阅读(995)  评论(0编辑  收藏  举报