vue学习之Vue-Router用法实例分析
本文实例讲述了vue学习之Vue-Router用法。分享给大家供大家参考,具体如下:
Vue-router就像一个路由器,将组件(components)映射到路由(routes)后,通过点击
1、使用vue-router的步骤
//1、创建路由组件 constLink1={template:'#link1'}; constLink2={template:'#link2'}; constLink3={template:'#link3'}; //2、定义路由映射 constroutes=[ { path:'/link1',//定义相对路径 component:Link1,//定义页面的组件 children:[ { path:'intro',//子路由/link1/intro component:{template:'#ariesIntro'}, name:'ariesIntro',//为路由命名 }, { path:'feature', component:{template:'#ariesFeature'}, }, {path:'/',redirect:'intro'} ] }, {path:'/link2',component:Link2}, {path:'/link3',component:Link3}, {path:'/',redirect:'/link1'}//配置根路由,使其重定向到/link1 ]; //3、创建router实例 constrouter=newVueRouter({ routes//缩写,相当于routes:routes }); //4、创建和挂载根实例。 constapp=newVue({ router }).$mount('#app');//挂载到id为app的div
注意:要设置根路由,页面加载完成后默认显示根路由,否则将什么也不显示。
在页面中调用路由接口,
白羊座 处女座 金牛座