路由笨蚁，其實(shí)就是指向的意思铡溪，當(dāng)我點(diǎn)擊頁(yè)面上的home按鈕時(shí)铝噩，頁(yè)面中就要顯示home的內(nèi)容衡蚂，如果點(diǎn)擊頁(yè)面上的about 按鈕，頁(yè)面中就要顯示about 的內(nèi)容骏庸。Home按鈕 => home 內(nèi)容毛甲， about按鈕 => about 內(nèi)容，也可以說(shuō)是一種映射. 所以在頁(yè)面上有兩個(gè)部分具被，一個(gè)是點(diǎn)擊部分玻募，一個(gè)是點(diǎn)擊之后，顯示內(nèi)容的部分一姿。

點(diǎn)擊之后七咧，怎么做到正確的對(duì)應(yīng)改执，比如，我點(diǎn)擊home 按鈕坑雅，頁(yè)面中怎么就正好能顯示home的內(nèi)容。這就要在js 文件中配置路由衬横。

路由中有三個(gè)基本的概念 route, routes, router裹粤。

1， route蜂林，它是一條路由遥诉，由這個(gè)英文單詞也可以看出來(lái)，它是單數(shù)噪叙， Home按鈕 => home內(nèi)容矮锈， 這是一條route, about按鈕 => about 內(nèi)容， 這是另一條路由睁蕾。

2苞笨， routes 是一組路由，把上面的每一條路由組合起來(lái)子眶，形成一個(gè)數(shù)組瀑凝。[{home 按鈕 =>home內(nèi)容 }， { about按鈕 => about 內(nèi)容}]

3臭杰， router 是一個(gè)機(jī)制粤咪，相當(dāng)于一個(gè)管理者，它來(lái)管理路由渴杆。因?yàn)閞outes 只是定義了一組路由寥枝，它放在哪里是靜止的，當(dāng)真正來(lái)了請(qǐng)求磁奖，怎么辦囊拜？ 就是當(dāng)用戶(hù)點(diǎn)擊home 按鈕的時(shí)候，怎么辦点寥？這時(shí)router 就起作用了艾疟，它到routes 中去查找，去找到對(duì)應(yīng)的 home 內(nèi)容敢辩，所以頁(yè)面中就顯示了 home 內(nèi)容蔽莱。

4，客戶(hù)端中的路由戚长，實(shí)際上就是dom 元素的顯示和隱藏盗冷。當(dāng)頁(yè)面中顯示home 內(nèi)容的時(shí)候，about 中的內(nèi)容全部隱藏同廉，反之也是一樣仪糖「趟荆客戶(hù)端路由有兩種實(shí)現(xiàn)方式：基于hash 和基于html5 history api.

vue-router中的路由也是基于上面的內(nèi)容來(lái)實(shí)現(xiàn)的

在vue中實(shí)現(xiàn)路由還是相對(duì)簡(jiǎn)單的。因?yàn)槲覀冺?yè)面中所有內(nèi)容都是組件化的锅劝，我們只要把路徑和組件對(duì)應(yīng)起來(lái)就可以了攒驰，然后在頁(yè)面中把組件渲染出來(lái)。

1故爵， 頁(yè)面實(shí)現(xiàn)（html模版中）

在vue-router中, 我們看到它定義了兩個(gè)標(biāo)簽<router-link> 和<router-view>來(lái)對(duì)應(yīng)點(diǎn)擊和顯示部分玻粪。<router-link> 就是定義頁(yè)面中點(diǎn)擊的部分，<router-view> 定義顯示部分诬垂，就是點(diǎn)擊后劲室，區(qū)配的內(nèi)容顯示在什么地方。所以 <router-link> 還有一個(gè)非常重要的屬性 to结窘，定義點(diǎn)擊之后很洋，要到哪里去， 如：<router-link to=”/home”>Home</router-link>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
    <!-- router-link 定義點(diǎn)擊后導(dǎo)航到哪個(gè)路徑下 -->
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 對(duì)應(yīng)的組件內(nèi)容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

<script>
export default {

}
</script>

2隧枫， js 中配置路由

首先要定義route, 一條路由的實(shí)現(xiàn)喉磁。它是一個(gè)對(duì)象，由兩個(gè)部分組成： path和component. path 指路徑悠垛，component 指的是組件线定。如：{path:’/home’, component: home}
　　　　我們這里有兩條路由，組成一個(gè)routes:

 const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

最后創(chuàng)建router 對(duì)路由進(jìn)行管理确买，它是由構(gòu)造函數(shù) new vueRouter() 創(chuàng)建斤讥，接受routes 參數(shù)。

const router = new VueRouter({
      routes // routes: routes 的簡(jiǎn)寫(xiě)
})

配置完成后湾趾，把router 實(shí)例注入到 vue 根實(shí)例中,就可以使用路由了

const app = new Vue({
  router
}).$mount('#app')

執(zhí)行過(guò)程：當(dāng)用戶(hù)點(diǎn)擊 router-link 標(biāo)簽時(shí)芭商，會(huì)去尋找它的 to 屬性， 它的 to 屬性和 js 中配置的路徑{ path: ‘/home’, component: Home} path 一一對(duì)應(yīng)搀缠，從而找到了匹配的組件铛楣， 最后把組件渲染到 <router-view> 標(biāo)簽所在的地方。所有的這些實(shí)現(xiàn)才是基于hash 實(shí)現(xiàn)的艺普。

vue-cli 創(chuàng)建一個(gè)項(xiàng)目體驗(yàn)一下, 當(dāng)然不要忘記安裝vue-router
1, 在src 目錄下新建兩個(gè)組件簸州，home.vue 和 about.vue

<template>
    <div>
        <h1>home</h1>
        <p>{{msg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                msg: "我是home 組件"
            }
        }
    }
</script>

<template>
    <div>
        <h1>about</h1>
        <p>{{aboutMsg}}</p>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                aboutMsg: '我是about組件'
            }
        }
    }
</script>

2, 在 App.vue中 定義<router-link> 和 <router-view>

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
    <!-- router-link 定義點(diǎn)擊后導(dǎo)航到哪個(gè)路徑下 -->
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 對(duì)應(yīng)的組件內(nèi)容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

<script>
export default {

}
</script>

3, 在 src目錄下再新建一個(gè)router.js 定義router, 就是定義 路徑到 組件的 映射。

import Vue from "vue";
import VueRouter from "vue-router";

// 引入組件
import home from "./home.vue";
import about from "./about.vue";

// 要告訴 vue 使用 vueRouter
Vue.use(VueRouter);

const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    }
]

var router =  new VueRouter({
    routes
})
export default router;

4歧譬， 把路由注入到根實(shí)例中岸浑，啟動(dòng)路由。這里其實(shí)還有一種方法瑰步，就像vuex store 注入到根實(shí)例中一樣矢洲，我們也可以把vueRouter 直接注入到根實(shí)例中。在main.js中引入路由缩焦，注入到根實(shí)例中读虏。

import Vue from 'vue'
import App from './App.vue'

// 引入路由
import router from "./router.js"    // import router 的router 一定要小寫(xiě)责静， 不要寫(xiě)成Router, 否則報(bào) can't match的報(bào)錯(cuò)
new Vue({
  el: '#app',
  router,  // 注入到根實(shí)例中
  render: h => h(App)
})

5， 這時(shí)點(diǎn)擊頁(yè)面上的home 和about 可以看到組件來(lái)回切換盖桥。但是有一個(gè)問(wèn)題灾螃，當(dāng)首次進(jìn)入頁(yè)面的時(shí)候，頁(yè)面中并沒(méi)有顯示任何內(nèi)容揩徊。這是因?yàn)槭状芜M(jìn)入頁(yè)面時(shí)睦焕，它的路徑是 ‘/’，我們并沒(méi)有給這個(gè)路徑做相應(yīng)的配置靴拱。一般，頁(yè)面一加載進(jìn)來(lái)都會(huì)顯示home頁(yè)面猾普，我們也要把這個(gè)路徑指向home組件袜炕。但是如果我們寫(xiě){ path: ‘/’, component: Home },vue 會(huì)報(bào)錯(cuò)，因?yàn)閮蓷l路徑卻指向同一個(gè)方向初家。這怎么辦偎窘？這需要重定向，所謂重定向溜在，就是重新給它指定一個(gè)方向陌知，它本來(lái)是訪問(wèn) / 路徑，我們重新指向‘/home’, 它就相當(dāng)于訪問(wèn) ‘/home’, 相應(yīng)地, home組件就會(huì)顯示到頁(yè)面上掖肋。vueRouter中用 redirect 來(lái)定義重定向仆葡。

const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    },
    // 重定向
    {
        path: '/', 
        redirect: '/home' 
    }
]

現(xiàn)在頁(yè)面正常了，首次進(jìn)入顯示home, 并且點(diǎn)擊也可以看到內(nèi)容的切換志笼。

6沿盅， 最后，我們看一下路由是怎么實(shí)現(xiàn)的

打開(kāi)瀏覽器控制臺(tái)纫溃，首先看到 router-link 標(biāo)簽渲染成了 a 標(biāo)簽腰涧，to 屬性變成了a 標(biāo)簽的 href 屬性，這時(shí)就明白了點(diǎn)擊跳轉(zhuǎn)的意思紊浩。router-view 標(biāo)簽渲染成了我們定義的組件窖铡，其實(shí)它就是一個(gè)占位符，它在什么地方坊谁，匹配路徑的組件就在什么地方费彼，所以 router-link 和router-view 標(biāo)簽一一對(duì)應(yīng)，成對(duì)出現(xiàn)呜袁。

這里寫(xiě)圖片描述

這里還看到敌买，當(dāng)點(diǎn)擊Home和About 來(lái)回切換時(shí)，a 標(biāo)簽有一個(gè)樣式類(lèi) .router-link-active 也在來(lái)回切換阶界， 原來(lái)這是當(dāng)router-link 處于選中狀態(tài)時(shí)虹钮，vueRouter 會(huì)自動(dòng)添加這個(gè)類(lèi)聋庵，因此我們也可以利用這個(gè)類(lèi)來(lái)改變選中時(shí)的狀態(tài)，如選中時(shí)芙粱，讓它變成紅色祭玉。但當(dāng)設(shè)置 .router-link-active {color: red;}，它并沒(méi)有生效春畔，這時(shí)還要在類(lèi)前面加一個(gè)a, a.router-link-active {color: red;}, 這樣就沒(méi)有問(wèn)題了脱货。未處于選中狀態(tài)的router-link， 我們也想給它更改樣式律姨，怎么辦? 直接給它添加一個(gè) class 就可以了振峻， <router-link class=”red”>Home</router-link>

動(dòng)態(tài)路由
　　上面我們定義的路由，都是嚴(yán)格匹配的择份，只有router-link 中的to屬性和 js 中一條路由route中 path 一模一樣扣孟，才能顯示相應(yīng)的組件component. 但有時(shí)現(xiàn)實(shí)卻不是這樣的，當(dāng)我們?nèi)ピL問(wèn)網(wǎng)站并登錄成功后荣赶，它會(huì)顯示 歡迎你凤价，+ 你的名字。不同的用戶(hù)登錄拔创， 只是顯示“你的名字” 部分不同利诺，其它部分是一樣的。這就表示剩燥，它是一個(gè)組件慢逾，假設(shè)是user組件。不同的用戶(hù)（就是用戶(hù)的id不同）灭红，它都會(huì)導(dǎo)航到同一個(gè)user 組件中氛改。這樣我們?cè)谂渲寐酚傻臅r(shí)候，就不能寫(xiě)死, 就是路由中的path屬性比伏，不能寫(xiě)死胜卤，那要怎么設(shè)置? 導(dǎo)航到 user 組件，路徑中肯定有user, id 不同赁项，那就給路徑一個(gè)動(dòng)態(tài)部分來(lái)匹配不同的id. 在vue-router中葛躏，動(dòng)態(tài)部分 以 : 開(kāi)頭，那么路徑就變成了 /user/:id, 這條路由就可以這么寫(xiě)： { path:”/user/:id”, component: user }.

我們定義一個(gè)user組件（自己隨便寫(xiě)一個(gè)就好了）悠菜，頁(yè)面中再添加兩個(gè)router-link 用于導(dǎo)航舰攒， 最后router.js中添加路由配置，來(lái)體驗(yàn)一下

app.vue 中添加兩個(gè)router-link：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
     <!--  增加兩個(gè)到user組件的導(dǎo)航悔醋，可以看到這里使用了不同的to屬性 -->
      <router-link to="/user/123">User123</router-link>
      <router-link to="/user/456">User456</router-link>
    </header>
    <router-view></router-view>   
  </div>
</template>

router.js 配置user動(dòng)態(tài)路由：

const routes = [
    {
        path:"/home",
        component: home
    },
    {
        path: "/about",
        component: about
    },
    /*新增user路徑摩窃，配置了動(dòng)態(tài)的id*/
    {
        path: "/user/:id",
        component: user
    },
    {
        path: '/', 
        redirect: '/home' 
    }
]

user組件

<template>
    <div>
        <h1>User</h1>
        <div>我是user組件</div>
    </div>
</template>
<script>
    export default {

    }
</script>

這時(shí)在頁(yè)面中點(diǎn)擊user123 和user456, 可以看到它們都導(dǎo)航到user組件，配置正確。

在動(dòng)態(tài)路由中猾愿，怎么獲取到動(dòng)態(tài)部分鹦聪？ 因?yàn)樵诮M件中是可以顯示不同部分的，就是上面提到的“你的名字”蒂秘。其實(shí)泽本，當(dāng)整個(gè)vue-router 注入到根實(shí)例后，在組件的內(nèi)部姻僧，可以通過(guò)this.$route 來(lái)獲取到 router 實(shí)例规丽。它有一個(gè)params 屬性，就是來(lái)獲得這個(gè)動(dòng)態(tài)部分的撇贺。它是一個(gè)對(duì)象赌莺，屬性名，就是路徑中定義的動(dòng)態(tài)部分 id, 屬性值就是router-link中to 屬性中的動(dòng)態(tài)部分松嘶，如123雄嚣。使用vuex時(shí)，組件中想要獲取到state 中的狀態(tài)喘蟆，是用computed 屬性，在這里也是一樣鼓鲁，在組件中蕴轨，定義一個(gè)computed 屬性dynamicSegment， user 組件修改如下：

<template>
    <div>
        <h1>User</h1>
        <div>我是user組件, 動(dòng)態(tài)部分是{{dynamicSegment}}</div>
    </div>
</template>
<script>
    export default {
        computed: {
            dynamicSegment () {
                return this.$route.params.id
            }
        }
    }
</script>

這里還有最后一個(gè)問(wèn)題骇吭，就是動(dòng)態(tài)路由在來(lái)回切換時(shí)橙弱，由于它們都是指向同一組件，vue不會(huì)銷(xiāo)毀再創(chuàng)建這個(gè)組件燥狰，而是復(fù)用這個(gè)組件棘脐，就是當(dāng)?shù)谝淮吸c(diǎn)擊（如：user123）的時(shí)候，vue 把對(duì)應(yīng)的組件渲染出來(lái)龙致，但在user123, user456點(diǎn)擊來(lái)回切換的時(shí)候蛀缝，這個(gè)組件就不會(huì)發(fā)生變化了，組件的生命周期不管用了目代。這時(shí)如果想要在組件來(lái)回切換的時(shí)候做點(diǎn)事情屈梁，那么只能在組件內(nèi)部（user.vue中）利用watch 來(lái)監(jiān)聽(tīng)route 實(shí)現(xiàn).

<script>
    export default {
        data () {
            return {
                dynamicSegment: ''
            }
        },
        watch: {
            $route (to,from){
                // to表示的是你要去的那個(gè)組件榛了，from 表示的是你從哪個(gè)組件過(guò)來(lái)的在讶，它們是兩個(gè)對(duì)象，你可以把它打印出來(lái)霜大，它們也有一個(gè)param 屬性
                console.log(to);
                console.log(from);
                this.dynamicSegment = to.params.id
            }
        }
    }
</script>

嵌套路由
　　嵌套路由构哺，主要是由我們的頁(yè)面結(jié)構(gòu)所決定的。當(dāng)我們進(jìn)入到home頁(yè)面的時(shí)候战坤，它下面還有分類(lèi)曙强，如手機(jī)系列残拐，平板系列，電腦系列旗扑。當(dāng)我們點(diǎn)擊各個(gè)分類(lèi)的時(shí)候蹦骑，它還是需要路由到各個(gè)部分，如點(diǎn)擊手機(jī)臀防，它肯定到對(duì)應(yīng)到手機(jī)的部分眠菇。

在路由的設(shè)計(jì)上，首先進(jìn)入到 home ,然后才能進(jìn)入到phone, tablet, computer. Phone, tablet, compute 就相當(dāng)于進(jìn)入到了home的子元素袱衷。所以vue 提供了childrens 屬性捎废，它也是一組路由,相當(dāng)于我們所寫(xiě)的routes。

首先致燥，在home頁(yè)面上定義三個(gè)router-link 標(biāo)簽用于導(dǎo)航登疗，然后再定義一個(gè)router-view標(biāo)簽，用于渲染對(duì)應(yīng)的組件嫌蚤。router-link 和router-view 標(biāo)簽要一一對(duì)應(yīng)辐益。home.vue 組件修改如下：

<template>
    <div>
        <h1>home</h1>
<!-- router-link 的to屬性要注意，路由是先進(jìn)入到home,然后才進(jìn)入相應(yīng)的子路由如 phone,所以書(shū)寫(xiě)時(shí)要把 home 帶上 -->
        <p>
            <router-link to="/home/phone">手機(jī)</router-link>
            <router-link to="/home/tablet">平板</router-link>
            <router-link to="/home/computer">電腦</router-link>
        </p>
        <router-view></router-view>
    </div>
</template>

router.js 配置路由脱吱，修改如下：

const routes = [
    {
        path:"/home",
　　　　　// 下面這個(gè)屬性也不少智政，因?yàn)椋覀兪窍冗M(jìn)入home頁(yè)面箱蝠，才能進(jìn)入子路由
        component: home,
　　　　 // 子路由
        children: [
            {
                path: "phone",
                component: phone
            },
            {
                path: "tablet",
                component: tablet
            },
            {
                path: "computer",
                component: computer
            }
        ]
    },
    {
        path: "/about",
        component: about
    },
    {
        path: "/user/:id",
        component: user
    },
    {
        path: '/', 
        redirect: '/home' 
    }
]

這時(shí)當(dāng)我們點(diǎn)擊home 時(shí)续捂，它下面出現(xiàn)手機(jī)等字樣，但沒(méi)有任何對(duì)應(yīng)的組件進(jìn)行顯示宦搬，這通常不是我們想要的牙瓢。要想點(diǎn)擊home時(shí)，要想渲染相對(duì)應(yīng)的子組件间校，那還需要配置一條路由矾克。當(dāng)進(jìn)入到home 時(shí)，它在children中對(duì)應(yīng)的路由path 是空 ‘’憔足，完整的childrens 如下：

children: [
    {
        path: "phone",
        component: phone
    },
    {
        path: "tablet",
        component: tablet
    },
    {
        path: "computer",
        component: computer
    },
    // 當(dāng)進(jìn)入到home時(shí)聂渊，下面的組件顯示
    {
        path: "",
        component: phone
    }
]

命名路由

命名路由，很簡(jiǎn)單四瘫，因?yàn)楦鶕?jù)名字就可以知道汉嗽，這個(gè)路由有一個(gè)名字，那就直接給這個(gè)路由加一個(gè)name 屬性找蜜，就可以了饼暑。 給user 路由加一個(gè)name 屬性：

{
        path: "/user/:id",
        name: "user",
        component: user
}

命名路由的使用, 在router-link 中to 屬性就可以使用對(duì)象了,

<router-link to="/user/123">User123</router-link> // 和下面等價(jià) 
<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>   // 當(dāng)使用對(duì)象作為路由的時(shí)候，to前面要加一個(gè)冒號(hào),表示綁定

編程式導(dǎo)航：這主要應(yīng)用到按鈕點(diǎn)擊上。當(dāng)點(diǎn)擊按鈕的時(shí)候弓叛，跳轉(zhuǎn)另一個(gè)組件, 這只能用代碼彰居，調(diào)用rourter.push() 方法。 當(dāng)們把router 注入到根實(shí)例中后撰筷，組件中通過(guò) this.$router 可以獲取到router, 所以在組件中使用

this.$router.push(“home”), 就可以跳轉(zhuǎn)到home界面
轉(zhuǎn)自：https://www.cnblogs.com/SamWeb/p/6610733.html