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，进行拼接。这样做是为了代码清晰。

 

转载于:https://www.cnblogs.com/gsgs/p/6725228.html