关于vue-router:前端路由解析以及实现学习

3次阅读

共计 6180 个字符，预计需要花费 16 分钟才能阅读完成。

路由的概念来源于服务端，在服务端中路由形容的是 URL 与处理函数之间的映射关系。

在 web 前端单页面利用中，路由形容的是 URL 和 UI 之间的映射关系，这种映射关系是单向的，即 URL 变动引起 UI 更新。

要实现前端路由，须要解决两个外围：

如何扭转 URL 却不引起页面刷新
如何检测 URL 变动了

上面别离应用 hash 和 history 两种实现形式答复下面的两个外围问题。

hash 是 URL 中 #以及前面的那局部，罕用作锚点在页面内进行导航，扭转 URL 中的 hash 局部不会引起页面刷新。
通过 hashchange 监听 URL 的扭转。通过浏览器后退后退，通过 a 标签扭转，通过 window.location 扭转都会触发 hashchange 事件。

history 提供了 pushState 和 popState 办法，这两个办法扭转 URL 的 path 局部不会引起页面刷新。
history 提供 popState 事件，能够监听浏览器的后退后退事件。通过 pushState/replaceState 或者 a 标签扭转 URL 不会触发 popState 事件，好在咱们能够拦挡 pushState、replaceState、a 标签的点击事件来检测 URL 变动，所以监听 URL 变动能够实现，只是没有 hashChange 那么不便。

下面说到基本上分为两种实现形式，别离通过 hash 和 history 实现。

<body>
  <ul>
    <!-- 定义路由 -->
    <li><a href="#/home">home</a></li>
    <li><a href="#/about">about</a></li>

    <!-- 渲染路由对应的 UI -->
    <div id="routeView"></div>
  </ul>
</body>

// 页面加载，被动触发一次
window.addEventListener('DOMContentLoaded', onLoad)

window.addEventListener('hashchange', onHashChange)

var routerView = null

function onload() {routerView = document.querySelector('#routerView')
}

function onHashChange() {switch(location.hash) {
        case '#/home':
            routerView.innerHTML = 'HOME'
            return
        case '#/about':
            routerView.innterHTML = 'About'
            return
        default:
            return
    }
}

<body>
  <ul>
    <li><a href='/home'>home</a></li>
    <li><a href='/about'>about</a></li>

    <div id="routeView"></div>
  </ul>
</body>

window.addEventListener('DOMContentLoaded', onLoad)

window.addEvenetListener('popState', onPopState)

var routerView = null

function onLoad() {routerView = document.querySelector('#routerView')
    onPopState()
    // 拦挡 a 标签
    var linkList = document.querySelectorAll('a[href]')
    linkList.forEach(el => {el.addEventListener('click', function(e){e.preventDefault()
            history.pushState(null, '', el.getAttribute('href')
            onPopState()})
    })
}

function onPopState() {switch(location.pathname) {
        case '/home':
            routerView.innterHTML = 'HOME'
            return
        case '/about':
            routerView.innerHTML = 'about'
            return
        default: 
            return
    }
}

<BrowserRouter>
    <ul>
      <li>
        <Link to="/home">home</Link>
      </li>
      <li>
        <Link to="/about">about</Link>
      </li>
    </ul>

    <Route path="/home" render={() => <h2>Home</h2>} />
    <Route path="/about" render={() => <h2>About</h2>} />
  </BrowserRouter>

BrowerRouter 实现：

export deafult class BrowerRouter extends React.Component {
    state = {currentPath: util.extractHashPath(window.location.href)
    }
    
    onHashChange = (e) => {const currentPath = util.extrachHashPath(e.newURL)
        this.setState({currentPath})
    }
    
    componentDidMount() {window.addEventListener('hashChange', this.onHashChange)
    }
    
    componentWillUnmount() {window.removeEventListner('hashChange',this.onHashChange)
    }
    
    render() {
        return (<RouteContext.Provider value={{currentPath: this.state.currentPath}}>
        {this.props.children}
      </RouteContext.Provider>
        )
    }
}

Route 实现

export default ({path, render}) => {
    <RouteContext.Consumer>
        {{(currentPath) => currentPath === path && render()}}
    </RouteContext.Consumer>
}

Link 实现

export default ({to, ...props}) => <a {...props} href={"#" + to} />;

export default class HistoryRouter extends React.Component {
    state = {currentPath: utils.extractUrlPath(window.location.href)
    }
    
    onPopState = (e) => {const currentPath = utils.extractUrlPath(window.location.href)
        this.setState({currentPath})
    }
    
    componentDidMont() {window.addEventListener('popState', this.onPopState)
    }
    componentWillUnmount() {window.removeEventListener('popstate', this.onPopState)
    }
    
    render() {
    return (<RouteContext.Provider value={{currentPath: this.state.currentPath, onPopState: this.onPopState}}>
        {this.props.children}
      </RouteContext.Provider>
    );
  }
}

Route 的实现

export default ({path, render}) => (
    <RouteContext.Consumer>
        {({currentPath}) => {currentPath === path && render()}}
    </RouteContext.Consumer>
)

Link 实现

export default ({to, ...props}) => {
    <RouteContext.Consumer>
        {({onPopState}) => (<a href="" {...props} onClick={
                e=> {e.preventDefault()
                    window.history.pushState(null, "", to)
                    onPopState()}
            }>
        )}
    </RouteContext.Consumer>
}

应用形式和 vue-router 类型（vue-router 通过插件的机制注入路由，然而这样暗藏了实现细节，为了放弃代码直观，这里没有应用 vue 插件封装）：

<div>
      <ul>
        <li><router-link to="/home">home</router-link></li>
        <li><router-link to="/about">about</router-link></li>
      </ul>
      <router-view></router-view>
    </div>

const routes = {
    '/home': {template: '<h2>Home</h2>'}
}

const app = new Vue({
    el: '',
    components: {
        'router-view': RouterView,
        'router-link': RouterLink
    },
    beforeCreate() {this.$routes = routes}
})

router-view 实现：

<template>
  <component :is="routeView" />
</template>

<script>
import utils from '~/utils.js'
export default {data () {
    return {routeView: null}
  },
  created () {this.boundHashChange = this.onHashChange.bind(this)
  },
  beforeMount () {window.addEventListener('hashchange', this.boundHashChange)
  },
  mounted () {this.onHashChange()
  },
  beforeDestroy() {window.removeEventListener('hashchange', this.boundHashChange)
  },
  methods: {onHashChange () {const path = utils.extractHashPath(window.location.href)
      this.routeView = this.$root.$routes[path] || null
      console.log('vue:hashchange:', path)
    }
  }
}
</script>

router-link 实现：

<template>
  <a @click.prevent="onClick" href=''><slot></slot></a>
</template>

<script>
export default {
  props: {to: String},
  methods: {onClick () {window.location.hash = '#' + this.to}
  }
}
</script>

<div>
      <ul>
        <li><router-link to="/home">home</router-link></li>
        <li><router-link to="/about">about</router-link></li>
      </ul>
      <router-view></router-view>
</div>

const routes = {
  '/home': {template: '<h2>Home</h2>'},
  '/about': {template: '<h2>About</h2>'}
}

const app = new Vue({
  el: '.vue.history',
  components: {
    'router-view': RouterView,
    'router-link': RouterLink
  },
  created () {
    this.$routes = routes
    this.boundPopState = this.onPopState.bind(this)
  },
  beforeMount () {window.addEventListener('popstate', this.boundPopState) 
  },
  beforeDestroy () {window.removeEventListener('popstate', this.boundPopState) 
  },
  methods: {onPopState (...args) {this.$emit('popstate', ...args)
    }
  }
})

router-view 实现：

<template>
  <component :is="routeView" />
</template>

<script>
import utils from '~/utils.js'
export default {data () {
    return {routeView: null}
  },
  created () {this.boundPopState = this.onPopState.bind(this)
  },
  beforeMount () {this.$root.$on('popstate', this.boundPopState)
  },
  beforeDestroy() {this.$root.$off('popstate', this.boundPopState)
  },
  methods: {onPopState (e) {const path = utils.extractUrlPath(window.location.href)
      this.routeView = this.$root.$routes[path] || null
      console.log('[Vue] popstate:', path)
    }
  }
}
</script>

router-link 实现：

<template>
  <a @click.prevent="onClick" href=''><slot></slot></a>
</template>

<script>
export default {
  props: {to: String},
  methods: {onClick () {history.pushState(null, '', this.to)
      this.$root.$emit('popstate')
    }
  }
}
</script>

以上大部分内容和原文差不多，次要是记录集体学习的一个过程，全程基本上本人手打，加深印象。共勉~

正文完

vue-router

发表至： vue-router

2020-08-04

0

关于vue-router:P28-vue3-嵌套路由

关于vue-router:vuerouter

关于vue-router:vuerouter如何实时地址不变动态替换路由参数地址栏参数

关于vue-router:简单的vuerouter实现

关于javascript:笑联-x-mPaaS-12-个模块全面小程序化如何打造真正的一次开发复用多端

关于vue-router:前端路由解析以及实现学习

1. 什么是前端路由

2. 如何实现前端路由

2.1 通过 hash 实现

2.2 通过 history 实现

3. 原生 JS 版前端路由实现

3.1 基于 hash 实现

3.2 基于 history 实现

4. React 版前端路由实现

4.1 基于 hash 实现

4.2 基于 history 实现

5. Vue 版本前端路由实现

5.1 基于 hash 实现

5.2 基 history 实现

小结

站内搜索