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>
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>
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>
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
实例在销毁之后会执行的函数