vue学习4-VueRouter

VueRouter

第一个VueRouter实例

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <!--路由入口-->
10         <router-link to="/index">index页面</router-link>
11         <router-link to='/home'>home页面</router-link>
12         <hr>
13         <!--路由出口-->
14         <router-view></router-view>
15 
16     </div>
17 
18     <script src="https://unpkg.com/vue/dist/vue.js"></script>
19     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
20 
21     <script>
22         const routes=[
23             {
24                 path:'/index',
25                 component:{
26                     template:`<div><h1>this is index page.</h1></div>`
27                 },
28 
29             },
30             {
31                 path:'/home',
32                 component:{
33                     template:`<div><h2>this is home page.</h2></div>`
34                 }
35             }
36         ];
37         //写路由
38         // let routers=[
39         //     {
40         //         path:'/index',
41         //         component:{
42         //             template:`<div><h2>this is inde oage,</h2></div>`
43         //         }
44         //     },
45         //     {
46         //         path:'/home',
47         //         component:{
48         //             template:`<div><h2>this is home page.</h2></div>`
49         //         }
50         //     }
51         // ];
52         // let routerObj = new VueRouter({
53         //     routers
54         // });
55         // let app = new Vue({
56         //     el:'#app',
57         //     router:routerObj,
58         // })
59         const routerObj = new VueRouter({
60         routes
61     })
62 
63 
64     var app = new Vue({
65         el: '#app',
66         data: {},
67         router: routerObj  // 将路由实例挂载到vue实例中
68     })
69     </script>
70 </body>
71 </html>
View Code

VueRouter的模糊匹配

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <!--路由入口-->
10         <router-link to="/user/sakula">sakula</router-link>
11         <router-link to="/user/hebe">hebe</router-link>
12         <router-link to="/index">index</router-link>
13         <hr>
14         <!--路由出口-->
15         <router-view></router-view>
16     </div>
17     <script src="https://unpkg.com/vue/dist/vue.js"></script>
18     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
19     <script>
20         let routes=[
21             {
22                 path:'/user/:name',
23                 component:{
24                     template:`<div><h2>{{$route.params.name}}1111111111111</h2></div>`,
25                 }
26             },
27             {
28               path:'/index',
29               component:{
30                   template:`<div><h2>{{$route.query.name}}</h2></div>`
31               }
32             }
33         ];
34         let routeObj=new VueRouter({
35             routes
36         });
37         let app=new Vue({
38             el:'#app',
39             data:{},
40             router:routeObj,
41         })
42     </script>
43 </body>
44 </html>
View Code

 VueRouter子路由

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8     <div id="app">
 9         <router-link to="/view">view</router-link>
10         <router-link to="/home">home</router-link>
11         <hr>
12         <router-view></router-view>
13     </div>
14     <script src="https://unpkg.com/vue/dist/vue.js"></script>
15     <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
16     <script>
17         let routes=[
18             {
19                 path:'/view',
20                 component:{
21                     template:`<div>this is view page.
22                                 <hr>
23                                 <router-link to="info" append>详细信息</router-link>
24                                 <hr>
25                                 <router-view></router-view>
26                                 </div>
27                                 `
28                 },
29                 children:[
30                     {
31                         path:'info',
32                         component:{
33                             template:`<div>
34                                 <h1>凤头钗 唐婉</h1>
35                                 <p>忠厚老实人的恶毒像饭里的砂砾或脱骨鱼片里未净的刺给人一种不期待的伤痛。</p>
36                             </div>`,
37                         }
38                     }
39                 ]
40 
41             },
42             {
43                 path:'/home',
44                 component:{
45                     template:`<div>this is home page.</div>`
46                 }
47             }
48         ];
49         let routerObj = new VueRouter({
50             routes,
51         });
52         let app = new Vue({
53             el:'#app',
54             data:{},
55             router:routerObj
56         })
57 
58     </script>
59 </body>
60 </html>
View Code

 

 

cnpm install vue-cli -g     #全局安装 vue-cli   vue的脚手架工具

vue init webpack wesite  #   初始化vue项目 用 webpack打包，项目名称 为  wbsite

cd website    #进入项目目录

npm run dev  #启动项目

 

分析项目的目录结构

node_modules   #下载的依赖的包，拷贝项目，要把此文件夹删除，只要进入 website这个目录  有package.json这个文件在，  执行  npm  install  就会把依赖的包都给安装完成.

cnpm install bootstrap@3.3.7 -D  # 进入website目录，执行  指定bootstrap的版本为3.3.7   并指定为开发环境，  -D

 

 

Vue实例的生命周期钩子函数(8个)

1 beforeCreate

  data属性只是声明没有赋值的时候

2 created

 data属性完成赋值

3 beforeMount

 页面上的{{name}}还没有 被渲染成真正的数据

4 mounted

 页面上的{{name}}被渲染成真正的数据

5 beforeUpdate 

 data数据更新之前会执行的函数

6 updated

 data数据更新完成之后会执行的函数

7 beforeDestroy

 实例被销毁之前会执行的函数

8 destroyed

 实例在销毁之后会执行的函数

posted @ 2018-12-16 14:52  hexintong  阅读(482)  评论(0)  编辑  收藏  举报