vue html页面跳转

Vue.js 中实现 HTML 页面跳转有多种方式，通常可以分为基于 Vue 路由器 (vue-router) 的跳转以及直接通过 JavaScript 或 <a> 标签完成的传统页面跳转。
基于 vue-router 的路由跳转
安装和配置 vue-router
首先需要安装并引入 vue-router 模块到项目中：
npm install vue-router@next --save
登录后复制
然后，在主文件（如 main.js）中进行初始化，并设置好相应的路径映射规则。
示例如下：
import { createRouter, createWebHistory } from 'vue-router';
const routes = [
{
path: '/home',
component: Home // 对应的组件名
},
{
path: '/about',
component: About
}
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
登录后复制
接下来，在入口点导入此路由器实例：
app.use(router);
登录后复制
使用 <router-link> 实现页面跳转
在模板里可以直接利用 <router-link> 组件来进行导航操作而无需刷新整个网页内容：
<template>
<div id="nav">
<!-- to 属性指定目标地址 -->
<router-link :to="{ name: 'Home', params:{id:'1'}}">首页</router-link> |
<router-link to="/about">关于我们</router-link>
</div>
</template>

<script>
...
</script>
登录后复制
编程式导航 - 程序控制下的动态跳转
除了静态链接外还可以采用编程手段实现复杂的业务需求。比如响应按钮点击事件后触发函数内部调用 $router.push() 方法执行具体的切换动作:
this.$router.push({path:'/detail/' + itemId})
// 或者更推荐的方式是使用命名路由
this.$router.push({name:"Detail",params:{itemId:item.id}})
登录后复制

直接 URL 地址更改（非 SPA）
如果只是想单纯地改变浏览器的历史记录而不涉及单页应用架构的话，则可以用原生 JS 来处理这种场景的需求。
window.location.href = "https://example.com/target-page";
登录后复制
也可以简单用超文本标签的形式完成基础功能支持：
<a href="./other.html" target="_self">前往其他HTML文档</a>
登录后复制