Vue-Router

時間 2019-11-11

標籤 vue router 简体版

原文原文鏈接

今天來給你們可以說一個Vue裏的router--路由，它跟以前angular路由、ui-router都有所不一樣，javascript

下面由我來給你們講解一下：css

 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>

效果圖就這樣的：（當點擊後他會放大變紅你所點擊的那個字）html

以上就這Vue-router路由，但願對某某有幫助！vue

相關標籤/搜索

vuerouter

vuejs+vuerouter+element

vue+vuerouter+vuex+axios

webpack+vue+vuerouter

VueRouter爬坑第三篇

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。