Vue路由的使用简单实例
Posted dilireba
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue路由的使用简单实例相关的知识，希望对你有一定的参考价值。
一、导入vue.js和vue.router.js，一定要先导入vue.js
二、代码
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router.js" type="text/javascript" charset="utf-8"></script> <body> <div id="app"> <router-link to="/menu1">第一句</router-link> <router-link to="/menu2">第二句</router-link> <router-link to="/menu3">第三句</router-link> <router-link to="/menu4">第四句</router-link> <!-- 路由出口 --> <router-view></router-view> </div> <template id="menu1"> <h1>床前明月光</h1> </template> <template id="menu2"> <h1>疑是地上霜</h1> </template> <template id="menu3"> <h1>举头望明月</h1> </template> <template id="menu4"> <h1>低头思故乡</h1> </template> </body> <script type="text/javascript"> //1、定义路由组件 const menu1={template:"#menu1"}; const menu2={template:"#menu2"}; const menu3={template:"#menu3"}; const menu4={template:"#menu4"}; //2、定义路由 const routers=[ {path:"/menu1",component:menu1}, {path:"/menu2",component:menu2}, {path:"/menu3",component:menu3}, {path:"/menu4",component:menu4} ]; //3、创建router然后使用routers的配置 const router=new VueRouter({ routes:routers }) //4、创建和挂载根实例 var vue=new Vue({ router }).$mount("#app"); </script>
以上是关于Vue路由的使用简单实例的主要内容，如果未能解决你的问题，请参考以下文章