Vue-router(基礎)_滾動行爲和history模式

 

1、前言                                                                                   

                               一、滾動事件

                               二、h5 history模式

2、主要內容                                                                            

一、   (1)使用前度路由，當切換到新路由時，想要頁面滾動到頂部，或者是保持原先滾動的位置，就像從新加載頁面那樣。vue-router的滾動行爲，它讓你能夠自定義路由切換的時候頁面如何滾動

可是：這個功能history.pushState 的瀏覽器中能夠使用

 　　（2）這個滾動行爲只能在h5的history模式下使用，在使用滾動行爲的時候必需要先將瀏覽器的hash模式，改爲history模式

二、建立一個小例子模擬演示

　　（1）目錄結構以下

　　

　　（2）.vue文件以下.js文件以下

<template>
    <div>關於我頁面</div>
</template>
<script type="text/javascript">
    export default{
        name:'About',
        data(){
            return {

            }
        }

    }
</script>

<style type="text/css" scoped></style>

About.vue

<template>
    <div>
        首頁頁面
    </div>
</template>

<script type="text/javascript">
    export default{
        name:'Home',
        data(){
            return {

            }
        }
    }
</script>

<style type="text/css" scoped=""></style>

Home.vue

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
        path:'/about',
        name:'Abut',
        component: About
    }
  ]
})

index.js

　　（3）hash模式是一上來就加載全部的請求，當你在切換路由的時候，不會再對後端發起情求，不會重載頁面

 

 

 　   （2）在index.js中設置爲history模式，發現當切換路由的時候，默認仍是保持在上一個路由的位置（這個功能瀏覽器已經幫咱們作好了）

　　（3）如今要實現，切換路由的時候，頁面停留在指定的位置

　　（4）在切換路由的時候沒有調用這個savedPosition，會跳到上一次加載那個頁面的時候滾動到的那個位置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/Home'
import About from '@/components/About'
Vue.use(Router)

export default new Router({
    mode:'history',
    scrollBehavior (to, from, savedPosition) {
              //只有調用了history.pushState()的時候纔會觸發這個方法，也就是當咱們點擊瀏覽器中的「<-」 "->"的時候

             //用這個方法實現指望滾動到哪一位置，
             // return { x: 0, y: 400 }

             //判斷若是滾動條的位置存在直接返回當前位置，不然返回到起點
             //savedPosition只有當用戶點擊前進後退，或者go(-1)的時候纔會調用
             console.log(savedPosition)
             if(savedPosition){

                 return savedPosition;

             }else{
                 return {x:0,y:200}
             }

     
    },
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
        path:'/about',
        name:'Abut',
        component: About
    }
  ]
})

 

三、history配合後端的例子

          01-使用本地服務器演示（使用npm run build打包編譯以後--->cd dist文件下-->執行hs -o -p 8888）,能夠發現能夠看到咱們的頁面，可是將這個地址複製到一個新的標籤中打開出現404

　　上面驗證了使用history模式必須配合後端

 

　　02-使用node, 在打包編譯後的dist文件夾下新建一個server.js以下

const express = require('express')
const http = require('http')
const fs = require('fs')
const httpPort = 8088

//app.use(express.static(path.join(__dirname, 'dist')))
http.createServer((req, res) => {
    if(req.url.startsWith('/static/js') || req.url.startsWith('/static/css')){
      fs.readFile('.'+req.url, (err,data)=>{
          res.end(data)
      })

      return;
    }
  fs.readFile('index.html', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })

    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

啓動服務器，將該訪問地址拿到一個新的網頁中同樣能夠渲染出來

 

 

四、原理：下面模擬了點擊a標籤變動地址欄的操做，可是必須在服務器環境下才能運行h5的history模式

 服務器代碼：

const http = require('http')
const fs = require('fs')
const httpPort = 8088

http.createServer((req, res) => {

 //讀取你要渲染的頁面
  fs.readFile('./03-history.html', 'utf-8', (err, content) => {
    if (err) {
      console.log('We cannot open "index.htm" file.')
    }

    res.writeHead(200, {
      'Content-Type': 'text/html; charset=utf-8'
    })
 
    res.end(content)
  })
}).listen(httpPort, () => {
  console.log('Server listening on: http://localhost:%s', httpPort)
})

history-server

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <a class="router-link" href="/">Home</a>
    <a class="router-link" href="/about">About</a>
    
    <div id="router-view">
        
    </div>

    <script type="text/javascript">
        //獲取到上面兩個a標籤對象
        var aobj = document.querySelectorAll('a');
        var routerView = document.getElementById('router-view');

        function Content(href){
            switch (href){
                case '/':
                routerView.innerHTML = '<div>首頁</div>';
                break;

                case '/about':
                routerView.innerHTML='<div>關於咱們</div>'
                break;
            }
        }

        console.log(location.pathname) //使用window.location.pathname 拿到/url
        Content(location.pathname);//讓一開始就出現內容

        for(var i=0; i<=aobj.length-1;i++){
            aobj[i].addEventListener('click',function(e){
                e.preventDefault();
                var href = e.target.getAttribute('href');
                //變動地址欄
                history.pushState({},'',href);
                Content(href);
            })
        }

    </script>
</body>
</html>

 

五、瞭解history.pushState()參考MDN:https://developer.mozilla.org/zh-CN/docs/Web/API/History_API

 

 

3、總結