?? 前端路由的特點：
??優(yōu)點：
用戶體驗好，不需要每次都從服務器全部獲取饱须，可以快速展現給用戶抑诸。
??缺點：
?? 不利于SEO薪伏。
?? 使用瀏覽器的前進后退時回重新發(fā)送請求滚澜，沒有合理地利用緩存。
?? 單頁面無法記住之前滾動的位置毅该，無法在前進博秫、后退的時候記住滾動的位置潦牛。
?? vue-router的基本使用
資料原文
路由其實就是“指向”的意思眶掌，當我點擊頁面上的home按鈕時，頁面上就要顯示出home的內容巴碗，如果點擊頁面上的about按鈕朴爬，頁面上就要顯示出about的內容。點擊之后橡淆，怎么做到正確的對應召噩，比如母赵，我點擊home按鈕，頁面上怎么正好能顯示home的內容具滴。這就要在js文件中配置路由凹嘲。
路由中有三個基本概念：route,routes,router
1?? route：它是一條路由，由這個英文單詞也可以看出來构韵，它是單數周蹭。Home按鈕 => home內容， 這是一條route疲恢；about按鈕 => about 內容凶朗， 這是另一條route。
2?? routes：routes 是一組路由显拳，把上面的每一條路由組合起來棚愤，形成一個數組。[{home 按鈕 =>home內容 }杂数， { about按鈕 => about 內容}]
3?? router：router 是一個機制宛畦，相當于一個管理者，它來管理路由揍移。因為routes 只是定義了一組路由刃永，它放在哪里是靜止的，當真正來了請求羊精，怎么辦斯够？ 就是當用戶點擊home 按鈕的時候，怎么辦喧锦？這時router 就起作用了读规，它到routes 中去查找，去找到對應的 home 內容燃少，所以頁面中就顯示了 home 內容束亏。
4?? 客戶端中的路由，實際上就是dom 元素的顯示和隱藏阵具。當頁面中顯示home 內容的時候碍遍，about 中的內容全部隱藏，反之也是一樣阳液∨戮矗客戶端路由有兩種實現方式：基于hash 和基于html5 history api.
?? vue-router路由兩種實現途徑
在vue中實現路由還是相對簡單的。因為我們頁面中所有內容都是組件化的帘皿，我們只要把路徑和組件對應起來就可以了东跪，然后在頁面中把組件渲染出來。
1??頁面實現（html模版中）
在vue-router中, 我們看到它定義了兩個標簽<router-link> 和<router-view>來對應點擊和顯示部分。<router-link> 就是定義頁面中點擊的部分虽填，<router-view> 定義顯示部分丁恭，就是點擊后，區(qū)配的內容顯示在什么地方斋日。所以 <router-link> 還有一個非常重要的屬性 to牲览，定義點擊之后，要到哪里去恶守， 如：<router-link to="/home">Home</router-link>
2??js 中配置路由
首先要定義route, 一條路由的實現竭恬。它是一個對象，由兩個部分組成： path和component. path 指路徑熬的，component 指的是組件痊硕。如：{path:’/home’, component: home}
我們這里有兩條路由，組成一個routes:
const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]
最后創(chuàng)建router 對路由進行管理押框，它是由構造函數 new vueRouter() 創(chuàng)建岔绸，接受routes 參數。
const router = new VueRouter({
routes // routes: routes 的簡寫
})
配置完成后橡伞，把router 實例注入到 vue 根實例中,就可以使用路由了盒揉。
const app = new Vue({
router
}).$mount('#app')
執(zhí)行過程：當用戶點擊 router-link 標簽時，會去尋找它的 to 屬性兑徘， 它的 to 屬性和 js 中配置的路徑{ path: '/home', component: Home} path 一一對應刚盈，從而找到了匹配的組件， 最后把組件渲染到 <router-view> 標簽所在的地方挂脑。所有的這些實現才是基于hash 實現的藕漱。
?? 動態(tài)路由
上面我們定義的路由，都是嚴格匹配的崭闲，只有router-link 中的to屬性和 js 中一條路由route中 path 一模一樣肋联，才能顯示相應的組件component. 但有時現實卻不是這樣的，當我們去訪問網站并登錄成功后刁俭，它會顯示 歡迎你+ 你的名字橄仍。不同的用戶登錄， 只是顯示“你的名字” 部分不同牍戚，其它部分是一樣的侮繁。
我們經常需要把某種模式匹配到的所有路由，全部映射到同一個組件如孝。例如宪哩，有一個User組件，對于所有ID各不相同的用戶暑竟，都要用這個組件來渲染斋射。那么育勺，我們可以在vue-router的路由路徑中使用【動態(tài)路徑參數】但荤。
當使用路由參數時罗岖，例如從/user/foo導航到/user/bar，原來的組件實例會被復用腹躁。因為兩個路由都渲染同一個組件桑包，比起銷毀再創(chuàng)建，復用則顯得更加高效纺非。這也意味著組件的生命周期鉤子不會再被調用哑了。
例如：
const User = {
template: '<div>User</div>
}
const router = new VueRouter({
routes: [
// 動態(tài)路徑參數，以冒號開頭
{ path: '/user/:id', component: User }
]
})
?? 嵌套路由
嵌套路由烧颖，主要是由我們的頁面結構所決定的弱左。當我們進入到home頁面的時候，它下面還有分類炕淮，如手機系列拆火，平板系列，電腦系列涂圆。當我們點擊各個分類的時候们镜，它還是需要路由到各個部分，如點擊手機润歉，它肯定到對應到手機的部分模狭。
在路由的設計上，首先進入到 home ,然后才能進入到phone, tablet, computer. Phone, tablet, compute 就相當于進入到了home的子元素踩衩。所以vue 提供了childrens 屬性嚼鹉，它也是一組路由,相當于我們所寫的routes。
例如：
const routes = [
{
path:"/home",
// 下面這個屬性也不少驱富，因為反砌，我們是先進入home頁面，才能進入子路由
component: home,
// 子路由
children: [
{
path: "phone",
component: phone
},
{
path: "tablet",
component: tablet
},
{
path: "computer",
component: computer
}
]
}
];
?? 命名路由
命名路由萌朱，很簡單宴树，因為根據名字就可以知道，這個路由有一個名字晶疼，那就直接給這個路由加一個name 屬性酒贬，就可以了。 給user 路由加一個name 屬性：
{
path: "/user/:id",
name: "user",
component: user
}
命名路由的使用, 在router-link 中to 屬性就可以使用對象了,
<router-link to="/user/123">User123</router-link> // 和下面等價
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>
// 當使用對象作為路由的時候翠霍，to前面要加一個冒號,表示on-bind綁定锭吨，否則會被當成對象
?? 編程式路由
除了使用< router-link >創(chuàng)建a標簽來定義導航鏈接，還可以借助router的實例方法寒匙，通過編寫代碼實現零如。
想要導航到不同的URL,則使用router.push方法躏将。這個方法會向history棧添加一個新紀錄，所以考蕾，當用戶點擊瀏覽器后退按鈕時祸憋，則回到之前的URL.
當點擊< router-link >時，這個方法會在內部調用肖卧，所以說蚯窥，點擊< router-link :to=”…”>等同于調用router.push(…)
語法 this.$router.history.push('要跳轉路由的地址')，push里面的參數有三種寫法塞帐，如下：
<script>
export default {
methods:{
toCart(){
//this.$router.push("/carts");
//this.$router.push({path:"/carts"});
this.$router.push({path:"/carts?a=123"});
}
}
}
</script>
