<!--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 依赖的页面。
//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',//?
},
]
})
