介绍下JS里4种实现页面跳转的方法

介绍下JS里4种实现页面跳转的方法

window.location.href= ‘url’: 比较常用的方法,直接跟指定要跳转的地方。

window.history.back(-1);: 参见的浏览器返回上一个已访问的页面,直到访问最初访问的页面。

window.navigate(“url”);: navigate对象包含有关浏览器的信息,也可以作为页面跳转,后面直接加要跳转的地方。

top.location= ‘url’;: 当页面中有内嵌框架时,指定最顶层的窗口跳转,及包含框架的最外层浏览器 。

示例:

要实现从一个页面A跳到另一个页面B,js实现就在A的js代码加跳转代码

JS跳转大概有以下几种方式:

第一种:(跳转到b.html)

<script language="javascript" type="text/javascript">
window.location.href="b.html";
</script>

第二种:(返回上一页面)

<script language="javascript">
window.history.go(-1);
</script>

第三种:

<script language="javascript">
window.navigate("b.html");
</script>

第四种:

<script language="javascript">
top.location=’b.html’;
</script>
  • 2
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue.js 中,可以使用 Vue Router 来实现页面跳转。以下是使用 Vue Router 实现页面跳转的基本步骤: 1. 安装 Vue Router: ```bash npm install vue-router ``` 2. 在 `main.js` 中引入 Vue Router 并注册: ```javascript import Vue from 'vue' import VueRouter from 'vue-router' import App from './App.vue' import router from './router' Vue.use(VueRouter) new Vue({ router, render: h => h(App) }).$mount('#app') ``` 3. 创建路由配置文件 `router.js`,并定义路由: ```javascript import VueRouter from 'vue-router' import Home from './components/Home.vue' import About from './components/About.vue' const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ] const router = new VueRouter({ routes }) export default router ``` 4. 在组件中使用 `<router-link>` 标签实现跳转: ```html <template> <div> <router-link to="/">Home</router-link> <router-link to="/about">About</router-link> </div> </template> ``` `<router-link>` 标签会渲染成一个 `<a>` 标签,并自动添加 `href` 属性和事件监听。点击 `<router-link>` 标签会触发路由跳转。 5. 在组件中使用 `$router.push()` 方法实现编程式跳转: ```javascript this.$router.push('/about') ``` `$router.push()` 方法会将路由跳转到指定的路径。可以在组件中使用该方法实现编程式跳转。 以上就是使用 Vue Router 实现页面跳转的基本步骤。根据具体的业务需求,还可以设置路由参数、路由嵌套等高级功能。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值