首页 > 代码库 > Vue-Router

Vue-Router

2024-10-22 22:39:39   209人阅读

今天来给大家能够说一个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=http://www.mamicode.com/"js/Vue.js"></script>
23         <script src=http://www.mamicode.com/"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


联系
我们