從零開始，零基礎，一點一點探索vue-router(vue2.0)

首先我們用vue-cli搭建一個vue開發的腳手架，刪除它的原來的代碼，開始寫自己的代碼，實現最簡單的router功能：

 

一，開始

新建幾個自己需要的頁面，隨便寫點東西

<template>  
<div id = "movie">
    I'm moive!
</div>
</template>
<script>
export default {};
</script>
<style>

</style>

 

看入口文件main.js,可以看到

import router from './router';

router從router這個文件夾引入，我們打開router這個文件夾下的index.js，在這里配置路由

import Vue from 'vue';
import Router from 'vue-router';
import post from '../components/post/post';
import movie from '../components/movie/movie';
import music from '../components/music/music';

// 記住用之前要先注冊
Vue.use(Router);

export default new Router({
  routes: [
    { path: '/post', component: post },
    { path: '/movie', component: movie },
    { path: '/music', component: music }
  ]
});

再來寫我們的app.vue文件（to和path是一一對應的）

<template>
  <div id="container">
    <div class="header">
      <div class="tab-item">
        <router-link to="/post">日志</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/movie">電影</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/music">音樂</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

記住我們的這個模板文件是掛載在id=app的div中的，所以在index.html中要有<div id="app"><app></app></div>,

然后保存，就可以看到：

 

二、動態路由匹配

修改router/index.js

Vue.use(Router);

export default new Router({
  routes: [
    { path: '/user/:id', component: post }
  ]
});

修改app.vue

<template>
  <div id="container">
    <div class="header">
      <div class="tab-item">
        <router-link to="/user/post">日志</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/user/movie">電影</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/user/music">音樂</router-link>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

修改post.vue

<template>  
    <div id = "post">
        I'm {{ $route.params.id }}!
    </div>
</template>
<script>
export default {};
</script>

看下效果：

 

雖然效果一樣，但這其實是post一個模板的三次復用，至於$route.params.id，可以參考文檔：http://router.vuejs.org/zh-cn/api/route-object.html

 

三、嵌套路由

首先先改寫app.vue

<template>
  <div id="container">
    <div class="header">
      <div class="tab-item">
        <router-link to="/user">日志</router-link>
      </div>
      <router-view></router-view>
    </div>
  </div>
</template>

再改寫post.vue

<template>  
    <div id = "post">
         <router-link to="/user/music">音樂</router-link> 
         <router-link to="/user/movie">電影</router-link>
      <router-view></router-view>
    </div>
</template>

再把movie.vue和music.vue,改寫成如下形式

<template>  
<div id = "movie">
    I'm Movie!
</div>
</template>

最后改router/index.js

Vue.use(Router);

export default new Router({
  routes: [
    { 
      path: '/user', 
      component: post, 
      children: [
        {
          path: '/user/movie',
          component: movie
        },
        {
          path: '/user/music',
          component: music
        }
      ]
    }
  ]
});

看結果，這就實現了最簡單的嵌套路由：

 

四、router.push()

其實你在點擊router-link時執行的就是router.push()的方法，我們可以單獨給它一個點擊事件，同樣可以實現跳轉

post.vue

 

<template>  
    <div id = "post">
         <router-link to="/user/foo/music">音樂</router-link> 
         <router-link to="/user/foo/movie">電影</router-link>
         <div class = "button">
         <button @click="goMusic">音樂</button>
         <button @click="goMovie">電影</button>
         </div>
      <router-view></router-view>
    </div>
</template>
<script>
export default {
  methods: {
    goMusic(){
        this.$router.push('/user/foo/music');
    },
    goMovie(){
        this.$router.push('/user/foo/movie');
    }
  }
};
</script>

看結果和直接點擊是一樣的：

 

五、路由的命名和參數傳遞

路由的命名實際上就是給路由綁定一個那么的屬性，通過name的值來跳轉；而參數的傳遞則可以在頁面進行綁定，下面做一個最簡單的例子

先把app.vue修改：

<template>
  <div id="container">
    <div class="header">
      <div class="tab-item">
        // 注意：，這里需要綁定
        <router-link :to="{ name: 'post' }">日志</router-link>
      </div> 
      <div class="tab-item">
        <router-link :to="{ name: 'movie' }">電影</router-link>
      </div> 
      <div class="tab-item">
         //傳遞兩個自定義參數
        <router-link :to="{ name: 'music', params: { id: 123, dataId:456} }">音樂</router-link>
      </div>
    </div>
      <router-view></router-view>
  </div>
</template>

在修改接收參數的music.vue:

<template>
    <div id="music">
        I'm Music! 
        // 可以直接接收
        <span>傳遞參數id: {{$route.params.id }}</span>
        <button @click="showData">調用參數</button>
        <span>接收參數：{{dataId}}</span>
    </div>
</template>
<script>
    export default {
        data() {
            return {
                dataId: ''
            }
        },
        methods: {
         // 也可以在這里接收后，賦值
            showData() {
                let dataId = this.$route.params.dataId;
                this.dataId = dataId;
            }
        }
    };
</script>

最后看一下結果：

 

這樣，我們就對vue-router進行了一個最簡單的了解，以及最簡單的應用