精华内容
下载资源
问答
  • Vue实现页面跳转

    万次阅读 2018-06-17 17:20:20
    如何点击底部书架跳转到对应的页面 <router-link :to="{name: 'bookshelf', params: { entityId: this.entityId } }" :class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" href="javascript:"> ...

    如何点击底部书架跳转到对应的页面

    <router-link :to="{name: 'bookshelf', params: { entityId: this.entityId } }"
                 :class="{'flex-item-1':'flex-item-1',cur:tabs[0].isShow}" href="javascript:">
                  <span class="tabNav-ico tabNav-book"></span>
                  <span class="tabNav-txt">书 架</span>
    
    </router-link>

    'name': 'bookshelf'表示要跳转的Vue组件名称,名称是在router文件下的index.vue中进行设置。

    {
         path: '/bookshelf',
         name: 'bookshelf',
         component: Bookshelf
    },

    params :{entityId: this.entityId}里面是要传递过去的参数。

    在bookshelf组件接收参数

    this.bookshelfId = this.$route.params.entityId;

    除了使用标签<router-link>进行跳转,还可以使用下面的方法

    <a @click="toIndex" :class="{'flex-item-1':'flex-item-1',cur:tabs[2].isShow}" href="javascript:">
          <span class="tabNav-ico tabNav-home"></span>
          <span class="tabNav-txt">首 页</span>
    
    </a>
    
    toIndex: function(){
            this.$router.push("/?entityId="+ localStorage.getItem("entityId"));
    
    }

    同样可以跳转页面,this.$router.push()方法只有一个参数的时候,代表跳转地址,还可以增加一个参数传值。

    写法:

    this.$router.push({name: "deepReadingDetail", params: {'id': data.id, 'title': data.title}});

    接收参数:

    this.$route.params.title

    需要注意path不能和params一起使用,否则params将无效。需要用name来指定页面。

    或者通过path和query传递参数

    this.$router.push({path: '/book', query: {'id', this.id}})

    页面接收参数使用 this.$route.query.id

    展开全文
  • js实现页面跳转的几种方式
  • 种方式实现Javaweb页面跳转

    千次阅读 2019-10-13 13:14:23
    自己经手的一个java项目要实现带参页面跳转页面跳转,完成任务后,总结一下自己知道了的几种方式实现:                首先我们有两大种方式实现页面跳转...
                                                <div class="article-copyright">
                <span class="creativecommons">
                <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">
                    </a>
            <span>
                版权声明:本文为博主原创文章,遵循<a href="http://creativecommons.org/licenses/by-sa/4.0/" target="_blank" rel="noopener"> CC 4.0 BY-SA </a>版权协议,转载请附上原文出处链接和本声明。            </span>
               <div class="article-source-link2222">
                    本文链接:<a href="https://blog.csdn.net/u013045878/article/details/52269388">https://blog.csdn.net/u013045878/article/details/52269388</a>
                </div>
            </span>
                    </div>
                                                    <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css">
                                        <link rel="stylesheet" href="https://csdnimg.cn/release/phoenix/template/css/ck_htmledit_views-3019150162.css">
                <div class="htmledit_views" id="content_views">
    


    背景:
           自己经手的一个java项目要实现带参页面跳转和页面跳转,完成任务后,总结一下自己知道了的几种方式。


    实现:        

           首先我们有两大种方式来实现页面跳转:1、JS(javascript);2、jsp跳转


    我们先来说一下简单的js实现页面跳转:好几种,这里简单介绍3个

            1、window.location.href="URL";
            2、window.navigate("URL")
            3、window.location.replace("URL")
           还有一些什么self.location和parent.location什么的,自己去探索;相信对于第一种           window.location.href="URL"大家都不陌生,这里就不多做介绍。第二种window.navigate("URL")这种方式只兼容于IE浏览器,不支持火狐啊、谷歌什么的。这里面需要说一下的是window.location.replace(“URL”),我们举例说明一下:

          假如我们有三个界面,1.jsp;2.jsp;3.jsp,当我们设置好从1.jsp用herf跳转到2.jsp(前提2上面用了window.location.replace(“3.jsp”),那我们会直接到界面3,貌似看上去和window.location.herf=”URL”差不多,但是当我们点击上一步时,也就是调用window.history.go(-1); wondow.history.back();方法的时候就会知道,我们直接回到界面1了而不是界面2;

    
      
    1. <input type="button" value="Location" οnclick="Location()"/>
    2. <input type="button" value="Navigate" οnclick="Navigate()"/>
    3. <script type="text/javascript">
    4. function Location() {
    5. window.location.href = "http://localhost:2416/Test/Index";
    6. }
    7. function Navigate() {
    8. window.navigate( "http://blog.csdn.net/liweizhong193516");
    9. } //只兼容与IE浏览器
    10. function Replace() {
    11. window.replace( "http://blog.csdn.net/liweizhong193516");
    12. }
    13. </script>


    Test/index界面代码:

    
      
    1. <input type="button" value="Location" οnclick="Location()"/>
    2. <script type="text/javascript">
    3. function Location() {
    4. window.location.href = "http://blog.csdn.net/liweizhong193516";
    5. }
    6. window.onload = function () {
    7. window.replace( "http://blog.csdn.net/liweizhong193516");
    8. }
    9. </script>


           拿段代码来说,当我点击按钮,会跳转到Test/index界面,但是因为执行了window.onload方法,会跳转到我的博客界面,当我点击返回是,跳转到的是第一个界面,而不是Test/indes界面

     
    

    下面说一下jsp实现界面跳转,我们学过的转发和重定向

    JSP 跳转方式大约有三种:

    1、转发:

    <span style="font-size:18px;">request.getRequestDispatcher("1.jsp").forward(request,response);</span>
      

           在服务器组件收到用户请求后。经过它的处理后有传递给了另一个组件。不修改用户的请求码。各组件处理完之后在返回给用户,例如主页面的框架。
              用户请求——>服务器——>组件1——>组件2——>服务器——>用户
                             
    这里发出的请求不变
    2、重定向:
    
     
    response.sendRedirect("success.jsp");
      
           在服务器组件收到用户请求后。经过处理修改用户请求。在返回给用户。这样用户再次使用这个请求就会被动的使用新的请求了。重定向一般是为了防止用户提交完数据后点浏览器刷新或点后退之后产生重复提交)
                用户请求-----》服务器-------》组件------>服务器-------》用户-------》新的请求
                         
    这里的请求不再是最初的请求,已经被改变了,url地址更换会很明显
    注意事项:
    1、此语句前不允许有out.flush(),如果有,会有异常:
    
     
    
      
    1. java.lang.IllegalStateException: Can 't sendRedirect() after data has committed to the client
    2. at com.caucho.server.connection.AbstractHttpResponse.sendRedirect(AbstractHttpResponse.java:558)
    2、这里跳转后,浏览器地址栏会发生变化,意味着url发生变化
    3、要是跳到别的主机上,那语句后面的代码会继续执行,相当于开了一个新的线程,但是对于response就没有意义了,因为你看不到了。
    3、<jsp:forward page="URL"/>
    注意事项:
    1、此语句前也不允许有out.flush(),如果有,会有异常:
    2、跳转后浏览器地址栏不变,但是只能跳到当前主机下
    3、此语句后面的语句执行完成后才会跳转  
    4、跳转后得路径变为当前路径,图片不是绝对路径将无法显示
    
     

    4、在网上,还看到一个:

    
     
    
      
    1. response.setStatus(302);
    2. response.setHeader("location","newurl");
    这种setHeader要结合setStatus(302)使用,302是一个状态吗,标注浏览器要进行重定向了,同时渔具铅也不允许有out.flush(),如果有,不会报异常,只是不跳转页面;跳转后地址栏发生变化
    
     

    总结: 通过以上的总结,重要一点的是我们必须要知道的转发和重定向,转发是什么:就是用户通过浏览器发送了http请求,而web服务器接受此请求后调用一个内部方法完成请求处理并来一个转发动作将目标资源发送给用户。在这里转发的路径必须是在同一个web容器下的url,不能转到其他的web路径上去,中间传递是自己容器内部的requeset,所以,可以共享request;浏览器地址栏的url地址不会变化,我们也就感受不出来服务器做了转发。

    
     

    而重定向:是用户通过浏览器发送了http请求,web服务器接受请求后发送302状态码响应(重定向)并且回应客户浏览器一个新的location,当客户浏览器发现时302响应,自动在发送一个新的http请求,请求的url就是新给的location,服务器再根据这个请求寻找相应资源并发送给用户。这里的回应的location可以是任意的url,同时因为浏览器重新发送了http请求,也就不存在request传递的概念。这时候,客户浏览器上的地址栏显示的新的url(重定向后的路径),用户可以看到地址的变化。所以,重定向行为中,浏览器至少做出了两次访问请求。

     
    
    
    

    
    

    展开全文
  • vue三不同方式实现页面跳转

    万次阅读 2019-01-09 09:02:30
    [跳转到主页]&lt;/router-link&gt; &lt;router-link to="/login"&gt;[登录]&lt;/router-link&gt; &lt;router-link to="/logout"&gt;[登出]&lt;/router-...
    • Vue:router-lin
     <router-link to="/">[跳转到主页]</router-link>
     <router-link to="/login">[登录]</router-link>
     <router-link to="/logout">[登出]</router-link>
    • this.$router.push("/");
    <button @click="goHome">[跳转到主页]</button>
    export default {
       name: "App",
       methods: {
         // 跳转页面方法
           goHome() {
           this.$router.push("/");
        },
    }

     

    • this.$router.go(1);
         <button @click="upPage">[上一页]</button>
         <button @click="downPage">[下一页]</button>
         upPage() {
          //  后退一步记录,等同于 history.back()
          this.$router.go(-1);
        },
    
        downPage() {
          // 在浏览器记录中前进一步,等同于 history.forward()
          this.$router.go(1);
        }

    代码示例:

    <template>
      <div id="app">
        <img src="./assets/logo.png">
        <router-view/>
        <router-link to="/">[跳转到主页]</router-link>
        <router-link to="/login">[登录]</router-link>
        <router-link to="/logout">[登出]</router-link>
    
        <!-- javascript跳转页面 -->
        <button @click="goHome">[跳转到主页]</button>
    
        <!-- 回到上一页 -->
        <button @click="upPage">[上一页]</button>
        <button @click="downPage">[下一页]</button>
    
        <!-- 回到下一页 -->
    
      </div>
    </template>
    
    <script>
      export default {
        name: "App",
        methods: {
          // 跳转页面方法
          goHome() {
            this.$router.push("/");
          },
          upPage() {
            //  后退一步记录,等同于 history.back()
            this.$router.go(-1);
          },
          downPage() {
            // 在浏览器记录中前进一步,等同于 history.forward()
            this.$router.go(1);
          }
        }
      };
    </script>

     

     

     

     

     

     

     

     

     

     

     

     

     

     

     

    展开全文
  • js代码中实现页面跳转的几种方式

    千次阅读 2013-12-16 09:56:29
    js代码中实现页面跳转的几种方式 注:jquery的$.get(),$.post(),$.ajax()都不会使页面发送跳转,因为其本质都是ajax请求。 第一: window.location.href="login.jsp?backurl="+window.location.href; ...

    js代码中实现页面跳转的几种方式

    注:jquery的$.get(),$.post(),$.ajax()都不会使页面发送跳转,因为其本质都是ajax请求。

    第一种:
    <script language="javascript" type="text/javascript">
    window.location.href="login.jsp?backurl="+window.location.href;
    </script>

    页面跳转最常用的是使用window.location.href="";这个既可以传递url,也可以传递参数。
    例:
    var param = $("#param").val();
    window.location.href = "NewList.aspx?param="+param;

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

    第三种:
    <script language="javascript">
    window.navigate("top.jsp");
    </script>

    第四种:
    <script language="JavaScript">
    self.location='top.htm';
    </script>

    第五种:
    <script language="javascript">
    alert("非法访问!");
    top.location='xx.jsp';
    </script>

    展开全文
  • 种方式实现Flex页面跳转

    千次阅读 2016-10-02 15:19:05
    Flex页面跳转  其实对于这个题目是恰当的,因为flex中是没有页面这个概念的,页面在flex里面其实就是一个个的Canvas,vbox,hbox等等之类的东西,看到的不同页面的切换...那么怎么实现Flex页面跳转呢,主要有一下几
  • 作为一名程序员,特别是java web开发的程序员,在使用servlet/jsp的时候,我们必须要知道实现页面跳转的两种方式的区别和联系:即转发和重定向的区别。 1、RequestDispatcher.forward方法只能将请求转发给同一个...
  • 这是controller,接到页面请求,返回indexwithAjax信号 ![图片说明](https://img-ask.csdn.net/upload/201712/04/1512352938_756819.png) 这是springmvc,配置了视图解析器,去找jsp下的indexwithAjax.jsp页面 !...
  • jsp实现页面跳转的几种方式

    千次阅读 2019-06-24 21:20:11
    一, 使用href超链接标记 (客户端跳转) 二, 提交表单 (客户端跳转)  <form name="form" method="post" action="page2.jsp"> <input type="submit" value="跳转1"> ...
  • SpringBoot实现页面跳转的三种方式

    千次阅读 2020-04-17 13:47:40
    跳转页面,你只会用controller吗?
  • 前端---js中实现页面跳转的几种方式

    万次阅读 2018-10-25 23:04:46
    Javascript实现页面跳转的几种方式 通过js或者html或者PHP等动态程序都可以方便的实现跳转,这里搜集了几种页面跳转方式 js方式页面跳转 1.window.location.href方式  &lt;script language="...
  • 页面跳转种方式

    万次阅读 2017-11-20 16:20:36
    项目中经常需要进行跳转操作,然后不同的业务场景有不同的需求,下面我列出自己项目中用到的三场景: 1、通过html标签进行跳转(最简单的方式) [html] view ...2、通过按钮实现页面跳转
  • ASP.NET实现页面跳转种方式

    千次阅读 2020-04-27 13:26:22
    在Web网页中网页的跳转是十分常见的和实用的,ASP.NET中提供了三种跳转页面方式,而他们都有不同的特点。Server对象的Transfer()保持原URL地址跳转到新界面,原始页面的元素显示。Server对象的Execute()保持原URL...
  • 本篇文章主要介绍了springMVC 几种页面跳转方式,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
  • js和jquery实现页面跳转的几种方式

    万次阅读 2019-06-24 10:12:28
    1、在原有的页面跳转 window.location.href='b.html' 2、在原有的页面返回上一个页面 window.history.back(-1) 3、在原有的页面跳转到b页面(只适用于ie) window.navigate('b.html') 4、跳转到b页面 self....
  • Servlet实现页面跳转的两种方式(转发和重定向)
  • js实现页面跳转重定向的几种方式

    千次阅读 2018-08-04 13:24:03
    转载自 js实现页面跳转重定向的几种方式 这篇文章主要介绍js实现页面跳转重定向的几种方式,需要的朋友可以参考下 第一:  &lt;script language="javascript"type="text/javascript"...
  • 我在JS里面写了个Ajax,传值给servlet,然后利用request.getRequestDispatcher(),打算跳转至另外一个页面。但是没有跳转成功,运行之后没反应。...所以可以考虑换一种方式进行跳转。 简单记录一下。
  • php中实现页面跳转的几种方式

    千次阅读 2019-03-21 10:24:53
    php中实现页面跳转的几种方式 转载:https://www.cnblogs.com/du892294464/p/6835277.html(感谢大佬的分享) 在PHP脚本代码中实现 <?php header("location:url地址") ?> 例如 <?php header("location:...
  • SpringMVC 几种页面跳转方式

    万次阅读 2018-03-30 16:07:53
    SpringMVC 几种页面跳转方式总结如下:1.使用ModelAndView1)、通过HttpServletResponse的API直接输出(需要配置渲染器)@Controllerpublic class RequestController{ @RequestMapping("/resp") ...
  • Flex页面跳转的五种实现方式

    千次阅读 2011-12-26 17:47:52
    在学习Flex的过程中,你可能会遇到Flex页面跳转的概念,这里和大家分享一下Flex中实现Flex页面跳转以下几种方式,相信本文介绍一定会让你有所收获。 Flex页面跳转 Flex中实现Flex页面跳转以下几种方式: Flex页面...
  • 页面跳转的三种方式

    千次阅读 2014-05-09 16:34:15
    项目中经常需要进行跳转操作,...2、通过按钮实现页面跳转 3、通过js实现页面跳转 (1)、在body中添加一个按钮或者其他的html标签,用来调用js方法: (2)、创建一个js方法: function direct(){ window.locatio
  • 页面跳转种方式

    千次阅读 2015-06-12 10:18:20
    在界面显示过程用,一般都是通过用户提交页面请求到Servlet,在通过Servlet处理后跳转到相应的界面,进行...下面分别来看这两种方式是如何进行实现的(以下代码是在Servlet中进行页面跳转操作的):  1.重定向(respon
  • 在iOS中,可以使用三不同的方式实现页面跳转并传递参数:nib页面方式,segue方式,和代码跳转。现在先来实现使用nib设计界面并传递参数。实现如下: (1)在项目中新建一个Cocoa Touch Class,继承自...
  • 种页面跳转方式

    千次阅读 2019-07-02 19:33:54
    页面跳转 用<a>标签<a href=""></a> 用window.location.href="" window.location="" history.go(-1) 后退一个页面 history.go(1)前进一个页面 history.go(0)刷新当前页面 读取的缓存,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 346,973
精华内容 138,789
关键字:

哪种方式不能实现页面的跳转