1.搭建腳手架
因為全局安裝vue-cli 腳手架，在之前就已經安裝好了。所以我們直接在桌面的projects文件夾下創建新項目。
在命令行輸入：vue init webpack-simple pizza-app 然后cd pizza-app, 安裝cnpm,最后運行。
然后創建所需要的文件夾如下：
2.制作導航
1.來到 https://v4.bootcss.com Bootstrap中文文檔，將BootstrapCDN css 部分拷貝一份。把拷貝的 link 部分粘貼到 index.html 代碼中。
注意：
加載bootstrap css 跨域問題
使用這個<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">，不用官網的。
index.html 代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8"> 5 <title>pizza-app</title> 6 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> 7 </head> 8 <body> 9 <div id="app"></div> 10 <script src="/dist/build.js"></script> 11 </body> 12 </html>
2.在Header.vue文件中寫入如下代碼
Header.vue代碼
1 <template> 2 <header> 3 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 4 <a class="py-2" href="#"> 5 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8"
x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69"
y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg> 6 </a> 7 <a href="/" class="navbar-brand">Pizza點餐系統</a> 8 9 <ul class="navbar-nav"> 10 <li class="nav-item active"> 11 <a class="nav-link" href="#">主頁</a> 12 </li> 13 <li class="nav-item active"> 14 <a class="nav-link" href="#">菜單</a> 15 </li> 16 <li class="nav-item active"> 17 <a class="nav-link" href="#">管理</a> 18 </li> 19 <li class="nav-item active"> 20 <a class="nav-link" href="#">關於我們</a> 21 </li> 22 </ul> 23 24 <ul class="navbar-nav ml-auto"> 25 <li class="nav-item active"> 26 <a class="nav-link" href="#">登錄</a> 27 </li> 28 <li class="nav-item active"> 29 <a class="nav-link" href="#">注冊</a> 30 </li> 31 </ul> 32 </nav> 33 </header> 34 </template>
代碼中"登錄 注冊" 的 ul 標簽添加了一個類 ”ml-auto" ,表示 margin-left auto, 就會實現這一塊內容在頁面的最右側。
其中<nav>標簽里面的class 是這樣引入的。 來到 https://v4.bootcss.com Bootstrap中文文檔，點擊 “快速入門” ，點擊 “Components" ,點擊 "Navbar" . 找到這么個玩意，
里面的nav 標簽的class就是我們所需要的。 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 這樣導航欄的背景就有了。
其中svg的矢量圖是這樣引入的。來到 https://v4.bootcss.com Bootstrap中文文檔。 點擊 “ 實例” ，點擊 “product". 會看到這個玩意
我們查看網頁源代碼，把含有svg矢量圖的<a>標簽拷貝下來，這樣svg矢量圖就有了。
3. 導航的樣式已經寫完了。接下來需要把子組件Header.vue和父組件App.vue相關聯。
App.vue代碼
1 <template> 2 <div id="app"> 3 <div class="container"> 4 <app-header></app-header> 5 </div> 6 </div> 7 </template> 8 9 <script> 10 import Header from './components/Header.vue'; 11 export default { 12 components:{ 13 //"app-header":Header 14 appHeader:Header 15 } 16 } 17 </script> 18 19 <style> 20 21 </style>
其中components里面注冊組件，有兩種寫法：1. es6駝峰寫法， 不需要引號 appHeader:Header ； 2. 常規寫法 ，需要引號 "app-header":Header
4. 路由跳轉准備工作
在About.vue Admin.vue 等等文件里面添加代碼<template> <h1> about </h1> </template>，紅色的部分任意改。
這部分就是為了下面代碼中 點擊按鈕，實現跳轉有頁面顯示而已。
5.路由跳轉
安裝路由，在IDE的Terminal中輸入這句話： npm install vue-router --save-dev 來安裝。
配置路由，使用路由首先要在main.js當中進行設置，通過 import VueRouter from 'vue-router' 將我們的路由模塊先引進來，然后在下面通過 Vue.use(VueRouter) 使用一下引用進來的模塊。
具體代碼如下：
main.js代碼
1 import Vue from 'vue' 2 import VueRouter from 'vue-router' //引進路由 3 import App from './App.vue' 4 import Home from './components/Home.vue' //引入Home組件 5 import Menu from './components/Menu.vue' //引入Menu組件 6 import Admin from './components/Admin.vue' 7 import About from './components/about/About.vue' 8 import Login from './components/Login.vue' 9 import Register from './components/Register.vue' 10 11 12 13 Vue.use(VueRouter) //使用路由 14 15 const routes = [ //定義數組routes,里面包含許多對象 16 {path:'/',component:Home}, // 斜杠代表根路徑 ”component:Home“ 表示點擊 "主頁" 的時候會展示Home組件的內容 17 {path:'/menu',component:Menu}, //跳轉到Menu組件 18 {path:'/admin',component:Admin}, 19 {path:'/about',component: About}, 20 {path:'/login',component:Login}, 21 {path:'/register',component:Register}, 22 ] 23 24 const router = new VueRouter({ //實例化router，然后把定義的數組routes放進去 25 routes, 26 mode:'history' //去除地址欄的 '#' 27 }) 28 29 new Vue({ 30 el: '#app', 31 router, //Vue實例中使用router 32 render: h => h(App) 33 })
路由配置完畢后，實現跳轉代碼，在Header.vue中，如果使用 <a href=""></a> 標簽，點擊時候會跳轉和刷新頁面，而使用路由 <router-link to=""></router-link> 則不會，to跟a標簽里的href是一樣的.
然后把<router-link to=""></router-link> 里面 to =" 這里填入前面配置好的path路徑，比如：跳轉到Home組件就是 ’ / ‘ ，跳轉到Menu組件就是 ’ / menu‘ " .
最后在App.vue父組件中寫入 <div class="container"> <router-view></router-view> </div> ， <router-view></router-view>表示你點擊了哪個組件，哪個組件就會到這里來。
6.路由跳轉小細節
a. <router-link to=""></router-link> ， router-link 在dom元素中默認為 a 標簽，添加 tag 屬性可以改為其他標簽形式。比如 <router-link tag="div" to=""></router-link> 就改為div標簽。
b. <router-link to=""></router-link> ， to 可以綁定一個動態的路由地址。 具體代碼實現如下：
1 <template> 2 <header> 3 <ul class="navbar-nav"> 4 <li class="nav-item active"> 5 <router-link class="nav-link" :to="homeLink">主頁</router-link> // :to="homeLink" ,使用冒號to去綁定一個變量 6 </li> 7 </ul> 8 </header> 9 </template> 10 11 <script> 12 export default{ 13 data(){ 14 return{ 15 homeLink:'/' //設置屬性替換內容,使用變量替換 '/' 16 } 17 } 18 } 19 </script>
c. 沒有找到的路由，引導到主頁面去。 比如用戶想進入 http://localhost:8080/menu 這個menu菜單去，卻打成了這樣http://localhost:8080/muuuu, 那么會什么都沒有。具體代碼解決如下：
在main.js中多加一個路由 {path:'*',redirect:'/'} 也就是 重定向
3. 路由精講之name屬性及跳轉方法
前面路由跳轉小細節中 <router-link to=""></router-link> ， to 可以綁定一個動態的路由地址，也就是給to綁定一個屬性，
比如：:to="homeLink"，也就是給 to 起了一個動態的名字。但是上面跳轉方法還要為 動態的名字 在 script標簽里面 設置替換的內容。這樣就很繁瑣。
我們可以直接在 main.js 路由中 使用 name屬性 來定義一個名字。然后在 Header.vue 中 用to 綁定該名字，代碼如下：
main.js 代碼
1 import Vue from 'vue' 2 import VueRouter from 'vue-router' 3 import App from './App.vue' 4 import Home from './components/Home.vue' 5 import Menu from './components/Menu.vue' 6 import Admin from './components/Admin.vue' 7 import About from './components/about/About.vue' 8 import Login from './components/Login.vue' 9 import Register from './components/Register.vue' 10 11 12 13 Vue.use(VueRouter) 14 15 const routes = [ 16 {path:'/', name:'homeLink', component:Home}, 17 {path:'/menu', name:'menuLink', component:Menu}, 18 {path:'/admin', name:'adminLink', component:Admin}, 19 {path:'/about', name:'aboutLink' , component: About}, 20 {path:'/login', name:'loginLink', component:Login}, 21 {path:'/register', name:'registerLink', component:Register}, 22 {path:'*',redirect:'/'}, 23 ] 24 25 const router = new VueRouter({ 26 routes, 27 mode:'history' 28 }) 29 30 new Vue({ 31 el: '#app', 32 router, 33 render: h => h(App) 34 })
Header.vue代碼
1 <template> 2 <header> 3 <nav class="navbar navbar-expand-lg navbar-light bg-light"> 4 <a class="py-2" href="#"> 5 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="d-block mx-auto"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg> 6 </a> 7 <a href="/" class="navbar-brand">Pizza點餐系統</a> 8 9 <ul class="navbar-nav"> 10 <!-- 方法一： --> 11 <!-- <li class="nav-item active"> 12 <router-link class="nav-link" to="/">主頁</router-link> 13 </li> --> 14 15 <!-- 方法二： --> 16 <!-- <li class="nav-item active"> 17 <router-link class="nav-link" :to=" homeLink">主頁</router-link> 18 </li> --> 19 20 <!-- 方法三： --> 21 <li class="nav-item active"> 22 <router-link class="nav-link" :to="{name:'homeLink'}">主頁</router-link> ///to = "一個對象" ，並綁定該對象的names屬性的值homeLink 23 </li> 24 <li class="nav-item active"> 25 <router-link class="nav-link" :to="{name:'menuLink'}">菜單</router-link> 26 </li> 27 <li class="nav-item active"> 28 <router-link class="nav-link" :to="{name:'adminLink'}">管理</router-link> 29 </li> 30 <li class="nav-item active"> 31 <router-link class="nav-link" :to="{name:'aboutLink'}">關於我們</router-link> 32 </li> 33 </ul> 34 35 <ul class="navbar-nav ml-auto"> 36 <li class="nav-item active"> 37 <router-link class="nav-link" :to="{name:'loginLink'}">登錄</router-link> 38 </li> 39 <li class="nav-item active"> 40 <router-link class="nav-link" :to="{name:'registerLink'}">注冊</router-link> 41 </li> 42 </ul> 43 </nav> 44 </header> 45 </template> 46 47 <!-- <script> 48 export default{ 49 data(){ 50 return{ 51 homeLink:'/' //設置屬性替換內容,使用變量替換 '/' 52 } 53 } 54 } 55 </script> -->
下面講解不同的方法進行路由的跳轉。
首先在Home.vue中寫如下代碼
1 <template> 2 <div> 3 <h1>Home</h1> 4 <button @click="goToMenu" class="btn btn-success">Let's go!</button> 5 </div> 6 </template> 7 8 <script> 9 export default{ 10 methods:{ 11 goToMenu(){ 12 //跳轉到上一次瀏覽的界面 13 // this.$router.go(-1) 14 15 //指定跳轉的地址 16 // this.$router.replace('/menu') 17 18 //指定跳轉路由的名字下 19 // this.$router.replace({name:'menuLink'}) 20 21 //通過push進行跳轉 22 // this.$router.push('/menu') 23 this.$router.push({name:'menuLink'}) 24 } 25 } 26 } 27 </script>