美文网首页
CnodeJS-Vue (二) --vue-router

CnodeJS-Vue (二) --vue-router

作者: YZY君 | 来源:发表于2017-08-04 10:49 被阅读18次
    <!--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',//?
        },
      ]
    })
    

    相关文章

      网友评论

          本文标题:CnodeJS-Vue (二) --vue-router

          本文链接:https://www.haomeiwen.com/subject/gijhlxtx.html