如何使用 Vue-router 在 JS 中实现动态 HTML 页面切换？

本篇文章给大家分享《如何使用 Vue-router 在 JS 中实现动态 HTML 页面切换？ 》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

js中实现history路由

要根据访问路径的不同，动态呈现不同HTML内容，可以使用js中的vue-router库。具体实现步骤如下：

1. 安装vue-router：npm install vue-router。
2. 定义路由规则：

const routes = [{
  name: 'PageA',
  path: '/a',
  meta: {
    template: '/subpages/page-a.html'
  }
}, {
  name: 'PageB',
  path: '/b',
  meta: {
    template: '/subpages/page-b.html'
  }
}];

3. 创建VueRouter实例：

const router = new VueRouter({ mode: 'history', routes: routes });

4. 在路由切换前钩子函数中加载子页面内容：

router.beforeEach(function (to, from, next) {
  // 移除旧页面
  $('#route-view').empty();
  // 加载新页面
  $("#route-view").load(to.meta.template);
  next(true);
});

5. 将路由实例挂载到全局变量中：

window.$router = router;

6. 在页面中添加按钮，用于切换路由：

<button id="menuA" onclick="$router.push({ name: 'PageA' })">切换到 A</button>
<button id="menuB" onclick="$router.push({ name: 'PageB' })">切换到 B</button>

注意：History Mode需要后端Web服务进行配置，否则刷新页面会出现404错误。

理论要掌握，实操不能落！以上关于《如何使用 Vue-router 在 JS 中实现动态 HTML 页面切换？ 》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！