Vue--vue-Router - 爱码网

一.vue路由的基本使用

为什么需要路由?

因为我们通过component切换组件无法给组件传递参数

component切换组件
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
 7 <title>Document</title>   
 8 <script src="../vue2.4.4.js"></script>
 9 </head>
10 
11 <body>
12 <!-- 定义一个vue的管理区块，（MVVM中的View） -->
13 <template >
14     <div>
15         <a href="#" @click="componentId='login'">登录</a>
16         <a href="#" @click="componentId='register'">注册</a>
17         <!-- :is 相当于给component绑定组件，绑定is后面的值对应的组件 -->
18         <component :is="componentId"></component>
19 </div>
20 </template>
21 <div >
22     <account></account>
23 </div>
24 </body>
25 <script>
26     Vue.component("account",{
27         template:"#account",
28         // 在父组件中添加一个componentId的属性，将来给上面模板中的component使用
29         data:function() {
30             return {
31                 componentId:"login"
32             }
33         },
34         // methods:{
35         //     register:function() {
36         //         this.componentId = "register";
37         //     }
38         // },
39         components:{
40             "login":{
41                 template:"<span>login</span>"
42             },
43             "register":{
44                 template:"<span>register</span>"
45             }
46         }
47     });
48     // 实例化vue对象（MVVM中的View Model）
49     new Vue({
50         // vm控制的区块为id为app的div，此div中的所有vue指令均可以被vm解析
51         el:'#app',
52         data:{
53         // 数据 （MVVM中的Model）   
54         },
55         methods:{
56         }
57     })
58 </script>
59 </html>
View Code