vue怎么打开新页面

百变鹏仔 3个月前 (09-25) #VUE

文章标签新页面

在 vue.js 中，有以下三种打开新页面的方法：1. 使用组件；2. 使用 $router.push() 方法；3. 使用 window.location.href 属性。

Vue 中打开新页面的方法

在 Vue.js 中，有以下几种打开新页面的方法：

1. 使用组件

组件是 Vue Router 中的内置组件，用于在单页面应用程序中导航。它可以用来打开新的页面或导航到现有页面。

立即学习“前端免费学习笔记（深入）”；

示例：

<template><router-link to="/new-page">Open New Page</router-link></template><script>import { defineComponent } from 'vue';import { useRouter } from 'vue-router';export default defineComponent({  setup() {    const router = useRouter();    return {      router,    };  },});</script>

2. 使用 $router.push() 方法

$router.push() 方法用于编程方式导航到一个新的页面。它将一个新的路由条目推送到路由堆栈中，从而打开新的页面。

示例：

this.$router.push('/new-page');

3. 使用 window.location.href

window.location.href 属性可以用来设置或获取当前页面的 URL。通过直接修改此属性，可以打开一个新的页面。

示例：

window.location.href = '/new-page';

文章推荐

vue怎么打开新页面

如何使用Vue和网易云API构建高性能的音乐搜索引擎

Vue中使用v-model的双向绑定优化应用的数据性能

Vue和Canvas：如何实现在线头像裁剪和尺寸调整工具

Vue组件通讯的实现方式有哪些？

如何使用Vue和网易云API开发一款智能化的音乐播放器