后端路由：對于普通網(wǎng)站，所有的超鏈接都是URL地址，所有的URL地址都對應(yīng)服務(wù)器上對應(yīng)的資源；
前端路由：對于單頁面應(yīng)用程序來說，主要通過URL中的hash(#)來實現(xiàn)不同頁面之間的切換，同時hash有一個特點，HTTP請求中不會包含hash相關(guān)的內(nèi)容，所以單頁面程序中的頁面跳轉(zhuǎn)主要用hash實現(xiàn)。在單頁面應(yīng)用程序中，這種通過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對應(yīng)哪個組件，必須是一個組件的模板對象，不能是組件的引用名稱

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． 將設(shè)置好的路由顯示在頁面上，router-view是vue-router提供的元素，專門用來當(dāng)做占位符的，將來根據(jù)路由規(guī)則匹配到的組件就會展示到router-view中去。
<router-view></ router-view >
命名視圖
router有一個name屬性，這個屬性可以指定當(dāng)前的router-view標(biāo)簽里邊放置的是哪個組件，在路由配置時，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默認(rèn)渲染為一個a標(biāo)簽

to屬性書寫路由地址

tag屬性表示想要渲染成一個什么標(biāo)簽

編程式導(dǎo)航

首先區(qū)分下this.router

this.$route是路由參數(shù)對象，所有路由中的參數(shù)params,query都屬于它

this.$router是一個路由導(dǎo)航對象，用它可以方便的使用js代碼，實現(xiàn)路由的前進(jìn)、后退，跳轉(zhuǎn)到新的URL地址

四種路由跳轉(zhuǎn)的方式

//  1 最簡單的編程式導(dǎo)航
          this.$router.push('/home/goodlist/'+id);
        //  2 在路由中拼接參數(shù)傳遞參數(shù)
          this.$router.push({path:'/home/goodlist/'+id});
        //  3 通過name屬性進(jìn)行路由跳轉(zhuǎn)
          this.$router.push({name:'貨物詳情',params:{id:id}});
        // 注意：如果使用了path，那么params會被忽略，也就是說在使用oath進(jìn)行路由跳轉(zhuǎn)時不能用params進(jìn)行傳參

        // 所以就有了第四種路由跳轉(zhuǎn)的方式，不過這種方式進(jìn)行跳轉(zhuǎn)后參數(shù)是以？跟隨在路由后面的
        //  4 這個例子的路由是/home/goodlist/?id=22
          this.$router.push({path:'/home/goodlist/',query:{id:id}});

redirect

重定向根目錄的組件，使項目每次打開時顯示的默認(rèn)頁為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:'/',      這個地方表示默認(rèn)的子頁面是哪個
          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: "天氣查詢"
        }
      ]
    }