• 从零开始简单的路由

    从零开始简单的路由

    如果你只需要非常简单的路由而不想引入一个功能完整的路由库，可以像这样动态渲染一个页面级的组件：

    1. const NotFound = { template: '<p>Page not found</p>' }
    2. const Home = { template: '<p>home page</p>' }
    3. const About = { template: '<p>about page</p>' }
    5. const routes = {
    6.   '/': Home,
    7.   '/about': About
    8. }
    10. new Vue({
    11.   el: '#app',
    12.   data: {
    13.     currentRoute: window.location.pathname
    14.   },
    15.   computed: {
    16.     ViewComponent () {
    17.       return routes[this.currentRoute] || NotFound
    18.     }
    19.   },
    20.   render (h) { return h(this.ViewComponent) }
    21. })

    结合 HTML5 History API，你可以建立一个麻雀虽小五脏俱全的客户端路由器。可以直接看实例应用。