首页 > 代码库 > vue 2.0 路由创建的详解过程

vue 2.0 路由创建的详解过程

2024-09-29 08:43:38   216人阅读

 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数据就会改变.

 

vue 2.0 路由创建的详解过程


联系
我们