后端路由：對于普通網(wǎng)站遇八，所有的超鏈接都是URL地址彻磁，所有的URL地址都對應服務器上對應的資源；
前端路由：對于單頁面應用程序來說渗常，主要通過URL中的hash(#)來實現(xiàn)不同頁面之間的切換掠械，同時hash有一個特點由缆，HTTP請求中不會包含hash相關的內容，所以單頁面程序中的頁面跳轉主要用hash實現(xiàn)份蝴。在單頁面應用程序中犁功，這種通過hash改變來切換頁面的方式稱作前端路由。
基本使用
1． 安裝vue-router
npm install vue-router
2． 要在模塊工程中使用路由婚夫，就必須要通過Vue.use()明確的安裝路由功能
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
3． 創(chuàng)建路由對象浸卦，并傳遞一個配置對象用來指示路由匹配規(guī)則。每個路由規(guī)則都是一個對象案糙，這個規(guī)則對象身上有兩個必須的屬性：path和component
path表示監(jiān)聽哪個路由連接地址
component表示前面匹配到的path對應哪個組件限嫌，必須是一個組件的模板對象，不能是組件的引用名稱
export default new Router({
routes: [
// {
// path: '/',
// name: 'HelloWorld',
// component: HelloWorld
// },
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/Menu',
name: 'Menu',
component: () => System.import("@/components/Menu.vue"),
children: [
{
path:'/',
component:() => System.import("@/components/UserCenter.vue"),
},
{
path: "/UserCenter",
name: "個人中心",
component:() => System.import("@/components/UserCenter.vue")
},
{
path: "/Game",
component: () => System.import("@/components/Game.vue"),
name: "休閑時刻"
},
{
path: "/GameList",
component: () => System.import("@/components/GameList.vue"),
name: "游戲記錄"
},
{
path: "/Routeline",
component: () => System.import("@/components/Routeline.vue"),
name: "路線規(guī)劃"
},
{
path: "/Weather",
component: () => System.import("@/components/Weather.vue"),
name: "天氣查詢"
}
]
}
],
mode:'history'
})
4． 將router添加到vue實例中去
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
5． 將設置好的路由顯示在頁面上时捌，router-view是vue-router提供的元素怒医，專門用來當做占位符的，將來根據(jù)路由規(guī)則匹配到的組件就會展示到router-view中去奢讨。
<router-view></ router-view >
命名視圖
router有一個name屬性稚叹，這個屬性可以指定當前的router-view標簽里邊放置的是哪個組件，在路由配置時，components書寫規(guī)范為（記得加s）：
components:{
‘default’:header,
‘left’:Left,
‘main’:Main
}
這樣在使用的時候扒袖，如果不給router-view添加name屬性塞茅，就直接顯示header組件，如果添加了name屬性季率，就顯示指定的組件野瘦。
router-link
<router-link to=’/login’ tag=’span’>登錄</router-link>
router-link默認渲染為一個a標簽
to屬性書寫路由地址
tag屬性表示想要渲染成一個什么標簽
編程式導航
首先區(qū)分下this.router
this.$route是路由參數(shù)對象，所有路由中的參數(shù)params,query都屬于它
this.$router是一個路由導航對象飒泻，用它可以方便的使用js代碼鞭光，實現(xiàn)路由的前進、后退泞遗，跳轉到新的URL地址
四種路由跳轉的方式
// 1 最簡單的編程式導航
this.$router.push('/home/goodlist/'+id);
// 2 在路由中拼接參數(shù)傳遞參數(shù)
this.$router.push({path:'/home/goodlist/'+id});
// 3 通過name屬性進行路由跳轉
this.$router.push({name:'貨物詳情',params:{id:id}});
// 注意：如果使用了path惰许，那么params會被忽略，也就是說在使用oath進行路由跳轉時不能用params進行傳參
// 所以就有了第四種路由跳轉的方式刹孔，不過這種方式進行跳轉后參數(shù)是以啡省？跟隨在路由后面的
// 4 這個例子的路由是/home/goodlist/?id=22
this.$router.push({path:'/home/goodlist/',query:{id:id}});
redirect
重定向根目錄的組件娜睛，使項目每次打開時顯示的默認頁為redirect指向的頁面髓霞。
{
path:'/',
redirect:Login
},
{
path: '/login',
name: 'Login',
component: Login
},
路由傳參
方式一：
<router-link to=’/login?id=10&name=hehe’>登錄</router-link>
拿參數(shù)的時候，只要在登錄組件里邊用：this.route,query.name
方式二：
{
path: "/UserCenter/:id/:name",
name: "個人中心",
component:() => System.import("@/components/UserCenter.vue")
},
使用的時候 this.route.parms.name
路由嵌套
{
path: '/Menu',
name: 'Menu',
component: () => System.import("@/components/Menu.vue"),
children: [
{
path:'/', 這個地方表示默認的子頁面是哪個
component:() => System.import("@/components/UserCenter.vue"),
},
{
path: "/UserCenter",
name: "個人中心",
component:() => System.import("@/components/UserCenter.vue")
},
{
path: "/Game",
component: () => System.import("@/components/Game.vue"),
name: "休閑時刻"
},
{
path: "/GameList",
component: () => System.import("@/components/GameList.vue"),
name: "游戲記錄"
},
{
path: "/Routeline",
component: () => System.import("@/components/Routeline.vue"),
name: "路線規(guī)劃"
},
{
path: "/Weather",
component: () => System.import("@/components/Weather.vue"),
name: "天氣查詢"
}
]
}
