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