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

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 页面切换？的详细内容，更多请关注www.sxiaw.com其它相关文章！