vue学习：webpack+vue（路由）

image.png

自己做了一个vue前端项目

因为工作中没有h5项目，慢慢的离h5越来越远，所以狠下心来做一个h5项目，就仿照简书h5做了一个单页面应用。

整体的项目搭建还是用的之前的webpack+vue2的代码。
文章在这：http://www.jianshu.com/p/468a69ac2fc4

然后一步一步的把项目搭建起来，首先需要把网站的路由系统做出来。
看一下文件目录：

image.png

第一步：引入路由

import routes from './router'
// 这是router.js
export default {
  '/': 'Home',
  '/login': 'Login',
  '/detail/:id':'Detail'
}
const app = new Vue({

el:"#app",
data:{
    currentRoute: window.location.pathname,
    topshow:false ,
    isLogin:false   
},
computed:{
    ViewComponent () {

        const matchingView = routes[this.currentRoute]
        return matchingView
            ? require('./views/' + matchingView + '.vue')
            : require('./views/404.vue')
    }
},
render (h) {
    return h(this.ViewComponent)
},
methods:{

    com_Ajax(obj,success,error){
        this.$ajax(obj).then(function(data){

            success(data);
        },function(data){
            
            error(data);
        })
    }
}


})

可以看见路由是通过监控 this.currentRoute 属性进行相应的页面渲染 这里个问题，用户通过路由跳转页面后直接刷新就会404，其实个问题需要在项目的服务端配置一下，这里就不多进行解释。

因为这个路由是基于 HTML5 history API 所以还需要将相关知识补上，看网上也有相关介绍如：https://segmentfault.com/a/1190000002447556

第二步：路由的组件

import VLink from '../components/VLink.vue'

<template>
<a
v-bind:href="href"
v-on:click="go"
>
<slot></slot>
</a>
</template>

<script>
import router from '../router'

export default {
props: {
  href: {
    type:String,
    required: true 
  }
},
methods: {
  
  go (event) { 
    event.preventDefault()
    this.$root.currentRoute = this.href
    window.history.pushState(
      null,
      router[this.href],
      this.href
    )
  }
}
}
</script>

<style scoped>
  .active {
    color: cornflowerblue;
  }
</style>

用的时候直接：

<v-link href="/login" class="colorMove">
        Login
</v-link>

其实看组件的最终改变的是 this.$root.currentRoute = this.href 所以触发前面的实时监控，进行页面的渲染。
这里用到了 window.history.pushState
history.pushState()
它的完全体是 history.pushState(stateObject, title, url)，包括三个参数。

第1个参数是状态对象，它可以理解为一个拿来存储自定义数据的元素。它和同时作为参数的url会关联在一起。

第2个参数是标题，是一个字符串，目前各类浏览器都会忽略它（以后才有可能启用，用作页面标题），所以设置成什么都没关系。目前建议设置为空字符串。

第3个参数是URL地址，一般会是简单的?page=2这样的参数风格的相对路径，它会自动以当前URL为基准。需要注意的是，本参数URL需要和当前页面URL同源，否则会抛出错误。

调用pushState()方法将新生成一条历史记录，方便用浏览器的“后退”和“前进”来导航（“后退”可是相当常用的按钮）。另外，从URL的同源策略可以看出，HTML5 history API的出发点是很明确的，就是让无跳转的单站点也可以将它的各个状态保存为浏览器的多条历史记录。当通过历史记录重新加载站点时，站点可以直接加载到对应的状态。

到这为止关于路由的相关介绍就没了。

我也是结合vue官网的路由案例进行学习的
就是这个：https://github.com/chrisvfritz/vue-2.0-simple-routing-example

© 著作权归作者所有
文／奔跑的攻城狮（简书作者）
原文链接：http://www.jianshu.com/p/ce23c878b677
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。