Vue-Router
Posted 心肺
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue-Router相关的知识，希望对你有一定的参考价值。
今天来给大家能够说一个Vue里的router--路由，它跟之前angular路由、ui-router都有所不同，
下面由我来给大家讲解一下：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Vue--Router</title> 6 <style type="text/css"> 7 *{ 8 text-decoration: none; 9 list-style: none; 10 a{ 11 color: blakc; 12 } 13 } 14 15 /*可以设置它选中时的状态*/ 16 .v-link-active{ 17 color: red; 18 font-size: 20px; 19 } 20 21 </style>
//引用Vue所需要的插件 22 <script src="js/Vue.js"></script> 23 <script src="js/vue-router.js"></script> 24 </head> 25 <body> 26 <div id="div"> 27 <ul> 28 <li><a v-link="{path:\'/home\'}">首页</a></li> 29 <li><a v-link="{path:\'/news\'}">新闻</a></li> 30 </ul> 31 <router-view></router-view> 32 </div> 33 <script type="text/javascript"> 34 //1.开启路由 35 var app = Vue.extend(); 36 37 //2.定义模板 38 var Home = Vue.extend({ 39 template:\'<h3>我是首页内容</h3>\' 40 }); 41 var News = Vue.extend({ 42 template:\'<h3>我是新闻内容</h3>\' 43 }); 44 45 //3.定义路由 46 var Router = new VueRouter(); 47 Router.map({ 48 \'/home\':{ 49 component: Home 50 }, 51 \'/news\':{ 52 component: News 53 } 54 }); 55 56 //开启运行路由 57 Router.start(app,\'#div\'); 58 59 </script> 60 61 </body> 62 </html>
效果图就这样的：（当点击后他会放大变红你所点击的那个字）
以上就这Vue-router路由，希望对某某有帮助！
以上是关于Vue-Router的主要内容，如果未能解决你的问题，请参考以下文章