vueJs(2.x)+router+vuex簡易博客系統

上一篇文章簡單介紹了下vue的基本語法，其實入門還是非常簡單，回到項目中，我們把界面已經全部都寫好了，在github中可以下載：https://github.com/shiyou00/blog_vue 可以對着項目看看，這章主要結合項目講解下路由的知識

項目中有兩個界面：
page/home/index.vue 這個是博客首頁
page/home/content.vue 這個是博客的內容頁

我們的請求接口是這樣的：
1、進入首頁請求所有文章，然後渲染成列表。
2、文章列表跳轉到文章詳情頁時，傳遞參數id到文章詳情頁，然後在詳情頁通過id請求後臺數據接口獲取相應的文章信息。

這裏就使用了路由知識，有幾個問題，我們來解決下？
1、配置首頁和詳情頁路由
2、路由是如何進行跳轉
3、vue組件是如何接受參數的

配置界面路由

router/index.js中

import Vue from 'vue'
import Router from 'vue-router'
import homeIndex from '../page/home/index'
import contentView from '../page/home/content'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/index.html',
      name: 'homeIndex',
      component: homeIndex
    },
    {
      path: '/content/:id',
      name: 'contentView',
      component: contentView,
      props: true
    }
  ]
})

path：訪問路徑
name：給組件定義一個名字
component：引入的組件(import)

路由的跳轉

配置好了之後，然後在界面中這樣訪問：

    <!-- 使用 router-link 組件來導航. -->
    <!-- 通過傳入 `to` 屬性指定鏈接. -->
    <!-- <router-link> 默認會被渲染成一個 `<a>` 標籤 -->
    <router-link to="/index.html">Go to index</router-link>

    <!-- 路由出口 -->
    <!-- 路由匹配到的組件將渲染在這裏 -->
    <router-view></router-view>

在實際開發中的首頁會這樣定義

   {
      path: '/',
      name: 'homeIndex',
      component: homeIndex
    }

app入口組件中添加

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

這樣項目啓動直接輸入http://localhost:8089(本項目中使用的) ， 就可以訪問到首頁了。

路由帶參數跳轉

   {
      path: '/content/:id', //這裏配置動態參數id
      name: 'contentView',
      component: contentView,
      props: true
    }

這是組件中，需要跳轉的組件

<router-link v-bind:to="{name:'contentView',params:{id:article.id}}">

name：跳轉的組件名稱
params：id的動態值
props:true 的跳轉到 了contentView組件後，在該組件中要獲取參數id是通過props中獲取，當然還可以通過$route的方式獲取，這裏就不講解了，可以通過官方文檔去學習。

組件中通過props中接收參數(content.vue文件)

export default{
    name:"contentView",
    props:['id'], //通過這裏去接收路由傳遞過來的參數
    components:{
      moduleNav,leftSide,moduleNotice,footerModule
    },
    created(){
      this.contentData(this.id); //這個方法就是把傳遞過來的參數調用api去請求響應的文章信息，這個是通過vuex狀態管理來實現的，現在不需要理會，只需要知道，獲取到該參數值，並且通過id去請求到相應的文章數據
    },
    methods: {
      ...mapActions([
        'contentData'
      ])
    }
  }

總結下：通過這篇文章我們學習到了配置路由，路由帶參數跳轉，已經組件接受參數值等操作，當然路由還有一些內容，包括：”嵌套路由”，”編程時路由導航”，”路由重定向”，等等更多路由參數，不過個人還是建議有空可以通讀下api文檔，然後實際需要用的時候再去查詢使用。