详解从Vue-router到html5的pushState

  

详解从Vue-router到html5的pushState

背景介绍

Vue-router 是 Vue.js 官方提供的路由管理器。它和Vue.js 完全集成，支持HTML5历史模式或hash模式，在前端路由中使用非常方便，同时也支持动态路由、嵌套路由和编程式路由等高级功能。

要深入了解Vue-router，首先需要了解什么是前端路由操作，以及 HTML5 History API 中的 pushState 和 replaceState。

前端路由操作

前端路由操作是指在单页应用（SPA）中，通过JS控制用户路由的变化，实现页面无刷新切换，提供更优越的用户体验。

SPA 的实现方式是只加载一个页面，然后通过前端路由操作，实现内容的动态切换。前端路由操作实际是通过监听 URL 改变事件，不同的 URL 响应不同的页面内容。

HTML5 History API

HTML5 History API 提供了两个方法：pushState 和 replaceState，通过这两个方法我们可以实现历史记录的操作，同时也可以改变当前页面 URL。

pushState

pushState() 方法可以向浏览器历史记录添加一条新的记录，并将当前页面 URL 更新为新的 URL。它接受三个参数：一个状态对象（state object）、一个新的标题（title）、以及新的URL（URL）。

下面是一个示例，通过 pushState 方法将 URL 修改为 "/about"。

history.pushState({page: 'about'}, "about", "/about.html");

replaceState

replaceState() 方法与 pushState() 方法类似，区别在于 replaceState 不会在浏览器历史记录中创建新的记录，而是将当前 URL 替换为新的 URL。它接受三个参数：一个状态对象（state object）、一个新的标题（title）、以及新的URL（URL）。

下面是一个示例，通过 replaceState 方法将 URL 修改为 "/contact"。

history.replaceState({page: 'contact'}, "contact", "/contact.html");

使用Vue-router进行前端路由操作

在Vue.js 中使用Vue-router进行前端路由操作非常方便。要使用 Vue-router，首先需要安装依赖。

npm install vue-router

在Vue.js 中，可以在 router/index.js 文件中定义路由规则，代码如下：

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home';
import About from '@/components/About';
import Contact from '@/components/Contact';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: About
    },
    {
      path: '/contact',
      name: 'contact',
      component: Contact
    }
  ]
})

在上面的例子中，我们定义了三个路由规则，分别对应三个组件：Home、About 和 Contact。同时，我们也设置了路由模式为 history 模式。这样就完成了 Vue-router 的配置。

在组件中，可以使用$router.push方法和 $router.replace方法来进行前端路由跳转。下面是一个示例，通过点击按钮来跳转到不同的页面：

<template>
  <div>
    <button @click="goHome">Go Home</button>
    <button @click="goAbout">Go About</button>
    <button @click="goContact">Go Contact</button>
  </div>
</template>

<script>
export default {
  methods: {
    goHome () {
      this.$router.push('/');
    },
    goAbout () {
      this.$router.push('/about');
    },
    goContact () {
      this.$router.push('/contact');
    }
  }
}
</script>

在上面的示例中，我们通过 $router.push('/about') 方法来跳转到 About 组件；同时，也可以通过 $router.replace('/contact') 方法来替换当前页面的 URL，这样就可以实现前端路由的操作。

示例说明

示例1：使用Vue-router实现前端路由操作

在这个示例中，我们使用 Vue-router 来实现前端路由操作，通过点击按钮来实现切换页面。同时，我们也演示了如何通过路由参数定义不同的页面内容。

<template>
  <div>
    <button @click="goHome">Go Home</button>
    <button @click="goAbout">Go About</button>
    <button @click="goArticle(1001)">Go Article 1</button>
    <button @click="goArticle(1002)">Go Article 2</button>

    <h2>{{title}}</h2>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    goHome () {
      this.$router.push('/');
    },
    goAbout () {
      this.$router.push('/about');
    },
    goArticle (id) {
      this.$router.push(`/article/${id}`);
    }
  },
  created () {
    // 根据路由参数不同，显示不同的文章内容
    this.$router.afterEach((to, from) => {
      let match = to.path.match(/^\/article\/(\d+)$/);
      if (match) {
        let id = match[1];
        this.title = `Article ${id} Title`;
        this.content = `Article ${id} Content`;
      }
    });
  }
}
</script>

在这个示例中，我们定义了四个按钮，分别能够跳转到不同的页面：首页、关于页面和两篇不同的文章页面。同时，我们在 created 钩子函数中监听路由变化，动态修改页面的标题和内容。

示例2：使用HTML5 History API实现前端路由操作

在这个示例中，我们展示了如何使用 HTML5 History API 实现前端路由操作。通过 pushState 和 replaceState 方法，我们可以实现前端路由的切换。

<template>
  <div>
    <button @click="goHome">Go Home</button>
    <button @click="goAbout">Go About</button>
    <button @click="goArticle(1001)">Go Article 1</button>
    <button @click="goArticle(1002)">Go Article 2</button>

    <h2>{{title}}</h2>
    <p>{{content}}</p>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: '',
      content: ''
    }
  },
  methods: {
    goHome () {
      history.pushState(null, '', '/');
      this.updatePage();
    },
    goAbout () {
      history.pushState(null, '', '/about');
      this.updatePage();
    },
    goArticle (id) {
      history.pushState(null, '', `/article/${id}`);
      this.updatePage();
    },
    updatePage () {
      let path = location.pathname;
      let match = path.match(/^\/article\/(\d+)$/);
      if (match) {
        let id = match[1];
        this.title = `Article ${id} Title`;
        this.content = `Article ${id} Content`;
      } else if (path === '/about') {
        this.title = 'About';
        this.content = 'This is About page';
      } else {
        this.title = 'Home';
        this.content = 'This is Home page';
      }
    }
  },
  created () {
    // 在页面加载时，动态修改页面内容
    this.updatePage();

    // 监听浏览器的前进和后退事件
    window.addEventListener('popstate', () => {
      this.updatePage();
    });
  },
  beforeDestroy () {
    // 在页面销毁时，清除 popstate 事件监听器
    window.removeEventListener('popstate');
  }
}
</script>

在这个示例中，我们定义了四个按钮，分别能够使用 HTML5 History API 实现前端路由操作。同时，我们在 created 钩子函数中监听 popstate 事件，动态修改页面内容和 URL。

相关文章
前端开发最新文章
热门教程