vue怎么打开新页面-Vue.js-PHP中文网

vue怎么打开新页面

下次还敢

发布： 2024-05-21 06:39:16

原创

5295人浏览过

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

vue怎么打开新页面

Vue 中打开新页面的方法

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

1. 使用 <router-link> 组件

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

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

示例：

<code class="vue"><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></code>

登录后复制

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

45°C商城系统

系统介绍 45°C 商城系统，以 Thinkphp5.0 + Uniapp + Layui2.9 + Vue 为技术基石，精心打造出的全新 MINI 商城应用。其功能覆盖全面，无论是 PC 商城、H5 商城，还是公众号商城、微信小程序以及抖音小程序的制作都能完美胜任。采用标准系统结合插件模式开发，用户能够极为便捷地定制专属的个性模块。整个系统，从程序设计到 UI 呈现，都秉持着一贯的小而美理念。程

查看详情

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

示例：

<code class="js">this.$router.push('/new-page');</code>

登录后复制

3. 使用 window.location.href

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

示例：

<code class="js">window.location.href = '/new-page';</code>

登录后复制

以上就是vue怎么打开新页面的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Vue的v-bind和v-on的语法糖分别是什么？学习Vue.js的最佳实践博客有哪些 Vue的异步更新队列是如何工作的？ Vue事件处理如何绑定？@click和v-on有什么区别？ Vue中computed和watch的使用场景有什么区别？