1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <title>Document</title>
7 <script src="vue221.js"></script>
8 <script src="vue-router231.js"></script>
9 </head>
10
11 <body>
12 <div id="app">
13 <router-link to="/login">文龙login router-link</router-link>
14 <router-link to="/register">文龙register点击这里指向to=register组件,模板会渲染 我已经在需要渲染的地方创建一个router-view的占位符</router-link>
15
16 <router-view></router-view>
17 </div>
18 </body>
19 </html>
20
21 <script>
22 var App = Vue.extend({ });
23 var login = Vue.extend({
24 template:"<div><h1>徐文龙login收到指令开始渲染</h1></div>"
25 });
26 var register = Vue.extend({
27 template:"<div><h1>非文龙resgister收到点击命令开始渲染 路由router子数组中path指向这个组件,这是组件的template模板</h1></div>"
28 });
29 var router = new VueRouter({
30 routes:[
31 {path:'/login',component:login},
32 {path:'/register',component:register}
33 ]
34 });
35
36 new Vue({
37 el:'#app',
38 router:router
39 })
40 </script>
41
42 //这个文件是vue.js的路由 var router是创建一个路由, routes本身就是一个数组.
43 //new vue 是根组件 或者叫做父组件,在根组件上,开劈一个路由,这里路由的path数据的component组件绑定已经创建的组件,当这个已经创建的组件模板数据改变了,会触发
44 //view部分的的 router-link 所指向的to=组件,这个歌组件中的template数据就会改变.
