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 [email protected] -D # 进入website目录，执行 指定bootstrap的版本为3.3.7 并指定为开发环境， -D