vue4
阿新 • • 發佈：2018-12-16
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> 11View Code<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> 2021 <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>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 [email protected] -D # 進入website目錄，執行 指定bootstrap的版本為3.3.7 並指定為開發環境， -D