我所知道的vue-router
vue-router :簡稱路由，簡單說就是根據不同的url地址，顯示不同的效果
<router-link> :組件用於幫助用戶進行導航，也就是我們傳統的a標籤經常做的事； a的標籤用href屬性來指定導航的目標地址，而<router-link>組件則用to屬性來定目標地址；
<router-view> :是路由的出口，路由匹配到的組件將渲染在這裡,即渲染<router-link>指向的目標地址。
同一個路徑可以匹配多個路由，匹配的優先級就按照路由的定義順序：誰先定義的，誰的優先級就最高。
創建簡單的vue-router
首先我們需要把vue-router添加到頁面，可直接用script引入頁面
<script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>也可以使用模塊化機制編程，導入Vue和Vue-router ,要調用Vue.use(VueRouter) ;
<router-link>和<router-view>不必成雙對的出現，可根據配置的不同路由渲染到一個<router-view>
<div id='router'> <router-link to='/home'>Go to Home</router-link> <router-link to='/new'>Go to New</router-link> <router-view></router-view> </div> //JavaScript 代码//1.创建组件const Home={ template:`<span>我是主页</span>` }; const News={ template:`<span>我是新闻</span>` }; //2.配置路由const routersname=[ { path:'/home',component:Home }, { path:'/new',component:News }, //重定向{ path:'*',redirect:'/home' }]; //3.生成路由实例const router=new VueRouter({ routes:routersname //此时routers 和routername 并不相等，所以不能在采用es6 里面对象的简写方法}); new Vue({ el:'#router', router })注意：在創建路由實例的時候應該知道其中使用了ES6對象裡面簡潔的語法；即在ES6中只寫屬性名不寫屬性值時，屬性值就代表屬性名所代表的變量
const router = new VueRouter({ routes // （缩写）相当于routes: routes 是ES6 对象里面简洁的语法})當然我們也可以不採用簡寫，自己隨便配置,還是剛剛那個例子
//2.配置路由const routersname=[ { path:'/home',component:Home }, { path:'/new',component:News }, //重定向{ path:'/new',component:News }, ]; //3.生成路由实例const router=new VueRouter({ routes:routersname //此时routers 和routername 并不相等//所以不能在采用es6 里面对象的简写方法});所以router後面的屬性值應該始終和配置路由時候的變量一樣
嵌套的vue-router
實際生活中的我們經常會遇到多層嵌套的組件組合而成， URL中各段動態路徑也按某種結構對應嵌套的各層組件
這時候我們怎麼辦吶？
其實嵌套路由很簡單，只需要加上一個children就好， children裡面的寫法和外面的一樣
$route.params ：表示當前的參數即冒號後面的東西
/detail/:id/age/:age --->$route.params表示id和age組成的對象
路由的兩種實例方法
router.push({path:'/home'}):直接添加一個路由，表現為切換路由，往歷史記錄裡面添加一個歷史記錄router.replace({path:'news'}):替換路由，歷史記錄裡面沒有添加記錄
引入了過渡動畫，順便可以溫習一下transform組件的知識，頁面效果看起來好看多了，哈哈哈哈
配置路由的模式
設置路由的跳轉方式，無論是哪種模式改變路由都不會重新加載頁面,
mode表示路由的配置模式:兩種
hash模式（默認）:使用URL的hash來模擬一個完整的URL，於是當URL改變時，頁面不會重新加載。 （在當前頁面的url後面加上路徑）-
history模式:通過history完成URL跳轉。 （當前目錄底下的路徑跳轉）
//创建路由实例const router = new VueRouter({ mode: 'history',//跳转页面routes })路由的滾動scrollBehavior
不知道你們有沒有遇到過這樣的情況？
當切換到新路由時，我想要想要頁面滾到頂部！ ！ ！
當切換到新路由時，保持原先的滾動位置！ ！ ！ ！
當切換到新路由時，我想隨意定位！ ！ ！ ！
這時候該怎麼辦？ ？ ？
告訴你vue-router能做到，而且很很好，它讓你可以自定義路由切換時頁面如何滾動。
const router = new VueRouter({ routes, scrollBehavior (to, from, savedPosition) { // return 期望滚动到哪个的位置return {x:0,y:0} //对于所有路由导航，简单地让页面滚动到顶部} })路由監聽watch
在vue中watch用來監聽當一個數據屬性值發送變化時，就可以調用的函數；屬於異步操作；一般情況下，我們建議用computed或者menthods代替。對於大型的應用我們就建議使用watch ；
關於mothd , computed , watch三者的具體區別，推薦看大漠老師寫的在Vue中何時使用方法、計算屬性或觀察者
回到vue-router ，當我們切換路由的時候，希望某些屬性也跟著路由變化；例如這時候我們就可以用watch來監聽路由,當路由發生變化時,相對於的樣式也跟著顯示或隱藏；這只是一個很簡單的例子
<router-link>屬性
to ：相當於a的標籤用href屬性，來指定導航的目標地址；導航的目標地址的幾種寫法
1.字符串表示
<router-link to='Home'>Home</router-link>2. v-bind綁定屬性
<router-link :to='Home'>Home</router-link>3.對象表示
<router-link :to="{path:'Home'}">Home</router-link>4.命名的路由
<router-link :to="{name:'Home',params:{home:123}}">Home</router-link>5.帶查詢參數，下面的結果為/Home?plan=private
<router-link :to="{path: 'Home', query: { plan: 'private' }}">Home</router-link> 注意：我們常用前兩種方法
replace
<router-link to='Home' replace>Home</router-link> 給它設置了replace屬性，會調用router.replace()而不是router.push() ，於是導航後不會留下history記錄。詳情請看上面router.replace和router.push()的區別
設置tag就會把<router-link>渲染成某種標籤
<router-link to="/foo" tag="li">foo</router-link> <!-- 渲染结果--> <li class='router-link-exact-active router-link-active'> foo </li><router-view>屬性
name給<router-view>設置一個名字，當有過個視圖的時候，能夠在保證每個視圖中精確準確的定位
<router-link to="/">/</router-link> <router-link to="/other">other</router-link> <router-view></router-view> <router-view name="a"></router-view> <router-view name="b"></router-view>說了這麼多， vue的基本語法已經學的差不多了，我的vue語法學習也差不多到此結束了，接下來就是多多練習，在實踐中去總結和繼續學習。路由是一個難點也是重點，在我接觸的node.js中，也會遇到路由的跳轉。狼叔解釋到“ vue-router和express路由用的是同一個模塊”。那這樣豈不是更加好啦，弄明白了這裡的路由跳轉， express那邊也會了，反之也成立。
文末來推荐一些vue的學習資料，都是精挑細選的
- 官方文檔系列
vue，vue-router，vuex，vue-loader - 大漠老師寫的
vue系列文章，很細很全，有深有淺。看了收穫挺多的 - 視頻學習推薦，從
vue 1.0開講，可以大致縱觀vue的發展，建議看的時候挑著看 vue 2.0基礎系列，vue2.0進階系列- 最後就是我自己總結的
vue和GitHub哈哈哈哈哈
作為一個vue的初學者，如果文章中有不對之處，還請指正，如果你有好的學習資源或建議，歡迎在下面的評論中與我一起分享
-------------------------------------------------- ---------------------------------------------
再次閱讀官網，發現官網真是個好東西，官網簡介大方，因有盡有，很全，可以考慮到我們需要解決的任何問題。官網的每一個小點都很重要，不容我們忽視；我想說說被我忽視的那些細小知識點，在我的畢業設計項目中卻又用到的知識點
1.
this.$router和$route的區別
第一次在官網看到這兩個東西，很迷惑這倆究竟是什麼意思，長得如此相像卻又不是同一個東西；詢問了一個朋友，然後自己又折騰了一下終於明白他們是什麼意思啦!
this.$rouer是路由的實例
$route是當前路由訊息
2. 重定向
重定向的幾種寫法：
直接表示：
{ path:'*',refirect:'/' }//其他的重定向到主页命名的路由：
const router = new VueRouter({ routes: [ { path: '/a', redirect: { name: 'foo' }} ] })一個方法，動態返回重定向目標：
const router = new VueRouter({ routes: [ { path: '/a', redirect: to => { // 方法接收目标路由作为参数// return 重定向的字符串路径/路径对象}} ] })路由懶加載
當打包構建應用時， Javascript包會變得非常大，影響頁面加載。如果我們能把不同路由對應的組件分割成不同的代碼塊，然後當路由被訪問的時候才加載對應組件，這樣就更加高效了。
component: resolve => require(['路径'], resolve)