vue学习之Vue-Router用法实例分析-创新互联
本文实例讲述了vue学习之Vue-Router用法。分享给大家供大家参考,具体如下:
创新互联建站是一家专业提供泰兴企业网站建设,专注与成都网站制作、网站建设、html5、小程序制作等业务。10年已为泰兴众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。Vue-router就像一个路由器,将组件(components)映射到路由(routes)后,通过点击
1、使用vue-router的步骤
//1、创建路由组件 const Link1={template:'#link1'}; const Link2={template:'#link2'}; const Link3={template:'#link3'}; //2、定义路由映射 const routes=[ { 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实例 const router = new VueRouter({ routes //缩写,相当于 routes: routes }); // 4、 创建和挂载根实例。 const app = new Vue({ router }).$mount('#app'); //挂载到id为app的div
另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。
网站题目:vue学习之Vue-Router用法实例分析-创新互联
分享路径:http://scyanting.com/article/dogooi.html