CnodeJS-Vue (二) --vue-router

<!--App.vue-->
<template>
  <div id="app">
    <cnode-head></cnode-head>
    <!-- router-view name? ref? -->
    <router-view name='main' ></router-view>
    <router-view name='side' ref='child' ></router-view>
  </div>
</template>

<script>
import cnodeHead from './components/cnodeHead'
export default {
  name: 'app',
  data() {
    return {
      authorName:'',
    }
  },
  components:{
    cnodeHead,
  },
  watch: {//?
    authorName(val) {
      this.$refs.child.name = val;//?
    },
  },
}
</script>

在根组件App.vue中引入组件和路由

<!--router/index.js-->
import Vue from 'vue'
import Router from 'vue-router'

import articleComp from '@/components/articleComp'
import userComp from '@/components/userComp'
import mainSec from '@/components/mainSec'
import sideSec from '@/components/sideSec'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'rootPath',
      component: {
        main:mainSec,
      }
    },
    {

    }
  ]
})

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。
如果不想要很丑的 hash，我们可以用路由的 history 模式，这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，也好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

详情看教程'HTML5 History 模式'

//mainSec.vue
   scrollMethod() {
     const sumH = document.body.scrollHeight;//获取对象的滚动高度。(页面总高度)
     const viewH = document.documentElement.clientHeight;//网页可见区域高
     const scrollH = document.body.scrollTop;//网页被卷去的高
       if (viewH + scrollH === sumH) {//判断页面卷到底部
          this.getData();
        }
    },

[height、clientHeight、scrollHeight、offsetHeight区别]

补全路由 /router/index.js

import Vue from 'vue'
import Router from 'vue-router'

import articleComp from '@/components/articleComp'
import userComp from '@/components/userComp'
import mainSec from '@/components/mainSec'
import sideSec from '@/components/sideSec'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'rootPath',
      components: {//s!
        main:mainSec,
      }
    },{
      path: '/topic/:id',
      name: 'ArticleRoute',
      components: {
        main: articleComp,
        side: sideSec,
      }
    },{
      path: '/user/:name',
      name: 'UserRoute',
      components: {
        main: userComp,
        side: sideSec,
      }
    },{
      path: '/user/:name',
      redirect: '/user:name',//?
    },
  ]
})