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文档，然后实际需要用的时候再去查询使用。