使用is跳转页面的几种方法

1,open()

打开一个新的浏览器窗口

<input type="button" value="去往新窗口按钮" onclick="fun1()">


    function fun1() {
      window.open("https://blog.csdn.net/daxiang12092205/article/details/11878477/")
    }

2,location.href

使用 location.href 属性可以设置或获取当前页面的 URL。通过将其值设置为新的 URL,可以实现页面跳转

function fun3() {
//返回当前页面
var url=window.location.href
alert(url)//返回完整的url
alert(location.host)
alert(location.hostname)
}

function fun4(){
//去往新的链接
window.location.href="链接";
}

3.reload()

location.replace() 方法可以实现页面跳转

但与前两种方式不同的是,它会替换当前页面的历史记录

   function fun6() {
      //替换----就跟一个链接一样
      location.replace("链接")
    }

4,history.go()

使用 history.go() 方法可以跳转到指定的历史记录索引。负数表示后退,正数表示前进

function fun2() {
//去往指定页面
window.history.go(-1)
}

5,alert(document.URL)

返回当前页面的url

function fun7() {
//返回当前页面的url
alert(document.URL)
}

<input type="button" value="返回当前url" onclick="fun7()">

6,window.navigate()跳转

<script language="javascript">
    window.navigate("链接");
</script>

7,history.back()

使用 history.back() 方法可以让浏览器后退到历史记录中的上一个页面

<script language="javascript">
    alert("返回");
    window.history.back(-1);
</script>

  • 10
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在 Vue.js 中,可以通过按钮点击来实现组件之间的页面跳转或替换。有几种方式可以实现这一功能,以下是其中两种常见的方法: 1. 使用 Vue Router:Vue Router 是 Vue.js 官方提供的路由管理插件。首先,你需要安装和配置 Vue Router。然后,在你的按钮点击事件中,使用 `router.push()` 方法实现页面跳转。例如: ```javascript <template> <div> <button @click="goToAnotherPage">跳转到另一个页面</button> </div> </template> <script> import { mapActions } from 'vuex'; export default { methods: { ...mapActions(['goToAnotherPage']), }, }; </script> ``` ```javascript // 在路由配置文件中 import VueRouter from 'vue-router'; import AnotherPage from './components/AnotherPage.vue'; const routes = [ { path: '/another-page', component: AnotherPage }, // 其他路由配置... ]; const router = new VueRouter({ routes, }); export default router; ``` 2. 使用条件渲染:在主页面组件中,使用条件渲染来控制要显示的组件。通过点击按钮,改变条件渲染的变量,从而切换到不同的组件。例如: ```javascript <template> <div> <button @click="toggleComponent">切换组件</button> <component v-if="showComponent" :is="currentComponent"></component> <component v-else :is="anotherComponent"></component> </div> </template> <script> import AnotherComponent from './components/AnotherComponent.vue'; export default { data() { return { showComponent: true, }; }, computed: { currentComponent() { return this.showComponent ? 'MainComponent' : 'AnotherComponent'; }, }, components: { AnotherComponent, }, methods: { toggleComponent() { this.showComponent = !this.showComponent; }, }, }; </script> ``` 以上是两种常见的实现方式,你可以根据具体的需求选择适合你的方法
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值