vue实现html跳页
实现 HTML 跳页的方法
在 Vue 中实现页面跳转（路由导航）可以通过多种方式完成，具体取决于项目是否使用 Vue Router。以下是常见的实现方法：
使用 Vue Router 进行编程式导航
通过 this.$router.push 方法实现跳转，适用于组件内部：
// 跳转到指定路径
this.$router.push('/target-page')
// 带参数跳转
this.$router.push({ path: '/user', query: { id: '123' } })
// 命名路由跳转
this.$router.push({ name: 'user', params: { userId: '123' } })声明式导航（模板中使用）
在模板中直接使用 <router-link> 组件：
<router-link to="/target-page">跳转页面</router-link>
<router-link :to="{ name: 'user', params: { userId: '123' }}">用户页面</router-link>替换当前路由（不保留历史记录）
使用 replace 方法或属性替代当前路由：
this.$router.replace('/new-page')或模板中：
<router-link to="/new-page" replace>替换页面</router-link>重定向到外部链接
如果需要跳转到非 Vue 路由的 HTML 页面：
window.location.href = 'https://external-site.com'
// 或
window.open('https://external-site.com', '_blank')动态路由匹配
在路由配置中设置动态参数：
const routes = [
{ path: '/user/:id', component: User }
]使用时通过 $route.params.id 获取参数。
导航守卫控制跳转
通过路由守卫实现权限控制或跳转拦截：
router.beforeEach((to, from, next) => {
if (requiresAuth(to) && !isAuthenticated) next('/login')
else next()
})注意事项
- 确保已正确安装和配置 Vue Router
- 路径区分大小写，建议统一使用小写
- 带参数跳转时注意
params需要命名路由，而query会显示在 URL 中 - 外部链接跳转会导致页面刷新，单页应用特性会中断
