什么是路由
后端路由：**對於普通的網站，所有的超鏈接都是URL地址，所有的URL地址都對應服務器上對應的資源；
前端路由：**對於單頁面應用程序來說，主要通過URL中的hash(#號)來實現不同頁面之間的切換，同時，hash有一個特點：HTTP請求中不會包含hash相關的內容；所以，單頁面程序中的頁面跳轉主要用hash實現；
在單頁面應用程序中，這種通過hash改變來切換頁面的方式，稱作前端路由（區別於后端路由）；
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 必須先導入Vue --> <script src="./lib/vue-2.4.0.js"></script> <!-- 在導入router包 --> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <div id="app"> <!-- <a href="#/log">登錄</a> <a href="#/zhuce">注冊</a> --> <!-- router-link 也是router提供的標簽，用來監聽URL 不用寫#號，默認渲染為一個a 標簽 --> <router-link to="/log" tag="span">登錄</router-link> <router-link to="/zhuce">注冊</router-link> <!-- VueRouter提供的元素標簽，用來切換路由組件的顯示的 --> <!-- 這是 vue-router 提供的元素，專門用來 當作占位符的，將來，路由規則，匹配到的組件，就會展示到這個 router-view 中去 --> <!-- 所以： 我們可以把 router-view 認為是一個占位符 --> <router-view></router-view> </div> <script> // 組件模板對象，以后定義組件都這么用 別使用template 那個不是組件模板對象 var log={ template:"<h1>登錄界面</h1>" } var zhuce={ template:"<h1>注冊界面</h1>" } // 路由實例 var vuerouterobj=new VueRouter({ // route // 這個配置對象中的 route 表示 【路由匹配規則】 的意思 routes: [// 路由匹配規則 // 每個路由規則，都是一個對象，這個規則對象，身上，有兩個必須的屬性： // 屬性1 是 path， 表示監聽 哪個路由鏈接地址； // 屬性2 是 component， 表示，如果 路由是前面匹配到的 path ，則展示 component 屬性對應的那個組件 // 注意： component 的屬性值，必須是一個 組件的模板對象， 不能是 組件的引用名稱； // { path: '/', component: login }, {path:'/',redirect:'/log'},// 這里的 redirect path是根路徑的時候，頁面重定向到登錄界面 {path:'/log',component:log}, {path:'/zhuce',component:zhuce}, ] }) // Vue實例 var vm=new Vue({ el:'#app', data:{}, methods: { }, // 引用路由實例 router:vuerouterobj // 將路由規則對象，注冊到 vm 實例上，用來監聽 URL 地址的變化，然后展示對應的組件 }) </script> </body> </html>
Vue-link 和vue-view 添加樣式和動畫
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 必須先導入Vue --> <script src="./lib/vue-2.4.0.js"></script> <!-- 在導入router包 --> <script src="./lib/vue-router-3.0.1.js"></script> </head> <body> <style> /* 給route-link 元素添加樣式 */ /* .router-link-active{ font-size: 30px; font-weight: 800; color: red; } */ .mystyle{ font-size: 30px; font-weight: 800; color: red; } .v-enter,.v-leave-to{ opacity: 0; transform: translate(0,200px) } .v-enter-active,.v-leave-active{ transition: all .4s ease-in-out; } </style> <div id="app"> <!-- <a href="#/log">登錄</a> <a href="#/zhuce">注冊</a> --> <!-- router-link 也是router提供的標簽，用來監聽URL 不用寫#號，默認渲染為一個a 標簽 --> <router-link to="/log" tag="span">登錄</router-link> <router-link to="/zhuce">注冊</router-link> <!-- VueRouter提供的元素標簽，用來切換路由組件的顯示的 --> <!-- 這是 vue-router 提供的元素，專門用來 當作占位符的，將來，路由規則，匹配到的組件，就會展示到這個 router-view 中去 --> <!-- 所以： 我們可以把 router-view 認為是一個占位符 --> <transition mode="out-in"> <!--給route-view 添加動畫 必須要使用transition 標簽包裹 並設置模式先出后進-->> <router-view></router-view> </transition> </div> <script> // 組件模板對象，以后定義組件都這么用 別使用template 那個不是組件模板對象 var log={ template:"<h1>登錄界面</h1>" } var zhuce={ template:"<h1>注冊界面</h1>" } // 路由實例 var vuerouterobj=new VueRouter({ // route // 這個配置對象中的 route 表示 【路由匹配規則】 的意思 routes: [// 路由匹配規則 // 每個路由規則，都是一個對象，這個規則對象，身上，有兩個必須的屬性： // 屬性1 是 path， 表示監聽 哪個路由鏈接地址； // 屬性2 是 component， 表示，如果 路由是前面匹配到的 path ，則展示 component 屬性對應的那個組件 // 注意： component 的屬性值，必須是一個 組件的模板對象， 不能是 組件的引用名稱； // { path: '/', component: login }, {path:'/',redirect:'/log'},// 這里的 redirect path是根路徑的時候，頁面重定向到登錄界面 {path:'/log',component:log}, {path:'/zhuce',component:zhuce}, ], // 使用router-link切換組件的時候，默認會給router-link添加上一個類為 router-link-active 一個類名 // 我們可以使用這個類名來添加樣式，或者使用linkActiveClass 修改這個類名（可以修改bootstrapt的類型哦） linkActiveClass:"mystyle" }) // Vue實例 var vm=new Vue({ el:'#app', data:{}, methods: { }, // 引用路由實例 router:vuerouterobj // 將路由規則對象，注冊到 vm 實例上，用來監聽 URL 地址的變化，然后展示對應的組件 }) </script> </body> </html>