vue-router 





 配置vue-router时，组件不需要注册名字。直接引用模板。




 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8     <title>Document</title>
 9     <script src="./node_modules/vue/dist/vue.js"></script>
10     <script src="./node_modules/vue-router/dist/vue-router.js"></script>
11 </head>
12 
13 <body>
14 
15 <div id="app">
16     <!-- <a href="#/login">login</a> -->
17     <!-- <a href="#/regis">regis</a> -->
18     <router-link to="/login" tag="span">login</router-link>
19     <router-link to="/regis" tag="span">regis</router-link>
20     <router-view></router-view>
21 </div>
22 
23 <script>
24     var login = {
25         template: '<h1>login</h1>'
26     };
27     var regis = {
28         template: '<h1>regis</h1>'
29     };
30     var index = {
31         template: '<h1>index</h1>'
32     }
33 
34     var routerobj = new VueRouter({
35         routes: [
36             //  路由匹配规则
37             { path: '/login', component: login },
38             { path: '/regis', component: regis },
39             { path: '/', component: index },
40         ]
41     })
42 
43     new Vue({
44         el: "#app",
45         data: {},
46         methods: {
47 
48         },
49         router: routerobj
50 
51     })
52 </script>
53 </body>
54 
55 </html>




 







		

		
posted @ 
2019-09-17 10:32 
normalboy(NB) 
阅读(130) 
评论(0) 
 
收藏 
举报