# :-: Vue-Router學習筆記以及Demo實例 ***** ### 實例Demo下載 1.0版本有待改進 ? [router0-1 安裝和基本配置 ](https://github.com/ragnar-document/Vue-router/tree/master/router0-1) [router0-2 傳參及獲取傳參 ](https://github.com/ragnar-document/Vue-router/tree/master/router0-2) [router0-3 子路由設置 ](https://github.com/ragnar-document/Vue-router/tree/master/router0-3) [router0-4 手動訪問和傳參](https://github.com/ragnar-document/Vue-router/tree/master/router0-4) [router0-5 命名視圖](https://github.com/ragnar-document/Vue-router/tree/master/router0-5) [router0-6 導航鉤子](https://github.com/ragnar-document/Vue-router/tree/master/router0-6) [router0-7 元數據及路由匹配](https://github.com/ragnar-document/Vue-router/tree/master/router0-7) [router0-8 路由組件傳參](https://github.com/ragnar-document/Vue-router/tree/master/router0-8) [router0-9 緩存數據](https://github.com/ragnar-document/Vue-router/tree/master/router0-9) [router0-10 單個路由過渡，基于單個路由的動態過度](https://github.com/ragnar-document/Vue-router/tree/master/router0-10) [router0-11 進入離開的過渡效果](https://github.com/ragnar-document/Vue-router/tree/master/router0-11) ***** ### 起步 ***start*** ?????♀? 為了方便學習我們就只創建一個html文件作為演示文件 ### **html部分** ?? ``` <div id="app"> <div> //router-link == <a> 它們具有相同的功能那就是跳轉 // to 是指定跳轉地址使用的 在router中設置path配套使用 // :to ="{name: 'user'}" 在router中設置name記得配套使用 <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </div> <div> //router-view 渲染視圖模版 <!-- 路由匹配到的組件將渲染在這里 --> <router-view></router-view> </div> </div> ``` ### JavaScript ?? ``` //第一步設置路由地址格式都是差不多是基礎版本需要自行添加更多 //template 模版也可以放到外面寫然后再引進來也沒關系官網的便是為了方便我嵌套進路徑中去了 var routes = [ { path: '/', component: { template: ` <div> <h1>首頁</h1> </div> `, } } ]; ``` ``` //第二步是實例話VuRouter var router = new VueRouter({ routes: routes, }); ``` ``` //第三步掛載到 頁面上去 new Vue({ el: '#app', router: router, }); ``` ``` vue用來實現SPA的插件 使用vue-router 1. 創建路由器: router/index.js new VueRouter({ routes: [ { // 一般路由 path: '/about', component: about }, { // 自動跳轉路由 path: '/', redirect: '/about' } ] }) 2. 注冊路由器: main.js import router from './router' new Vue({ router }) 3. 使用路由組件標簽: <router-link to="/xxx">Go to XXX</router-link> <router-view></router-view> 編寫路由的3步 1. 定義路由組件 2. 映射路由 3. 編寫路由2個標簽 嵌套路由 children: [ { path: '/home/news', component: news }, { path: 'message', component: message } ] 向路由組件傳遞數據 params: <router-link to="/home/news/abc/123"> props: <router-view msg='abc'> 緩存路由組件 <keep-alive> <router-view></router-view> </keep-alive> 路由的編程式導航 this.$router.push(path): 相當于點擊路由鏈接(可以返回到當前路由界面) this.$router.replace(path): 用新路由替換當前路由(不可以返回到當前路由界面) this.$router.back(): 請求(返回)上一個記錄路由 ``` ### 動態傳參 ***dynamic condition*** ``` <div> <router-link to="/user/蛋蛋">獲取方法</router-link> </div> { // 動態路徑參數 以冒號開頭 path: '/user/:name', component: { template: ` <div> //$router.params.name 獲取路由參數名稱 <h1>獲取用戶名: {{$route.params.name}}</h1> //$router.query.age 獲取詢問年齡 <h1>獲取年紀: {{$route.query.age}}</h1> </div> `, }, }, ``` ### 添加子路由 ``` //在??父級路由下添加 children:[ { path: 'name', component:{ template:` <div>模版字符串</div> ` } ] ``` ``` //??父級內容tempate中添加以下內容 添加router-link ?? to指向后需要添加append （to="more" append） 添加router-view 渲染router-link的內容出來 ``` ### 過渡動畫 ``` 利用vue去操控css的transition/animation動畫 模板: 使用<transition name='xxx'>包含帶動畫的標簽 css樣式 .fade-enter-active: 進入過程, 指定進入的transition .fade-leave-active: 離開過程, 指定離開的transition .xxx-enter, .xxx-leave-to: 指定隱藏的樣式 編碼例子 .xxx-enter-active, .xxx-leave-active { transition: opacity .5s } .xxx-enter, .xxx-leave-to { opacity: 0 } ``` <transition name="xxx"> <p v-if="show">hello</p> </transition>