精华内容
下载资源
问答
  • 路由跳转 Vue 原生js

    2021-11-23 11:26:33
    Vue中this.$router.push(参数) 实现页面跳转 // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params:...

    一、路由跳转

    1.push

        Vue中this.$router.push(参数) 实现页面跳转
        // 字符串
        this.$router.push('/home/first')
        // 对象
        this.$router.push({ path: '/home/first' })
        // 命名的路由
        this.$router.push({ name: 'home', params: { userId: wise }})
        this.$router.push({ name: 'home', query: { userId: wise }})
    

    2.replace

        this.$router.replace() (用法同上,push)
      
        //push和replace区别
        this.$router.push
        跳转到指定url路径,并想history栈中添加一个记录,点击后退会返回到上一个页面
        this.$router.replace
        跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)	
        
        
        // 接收参数
        // script 取参 this.$route.query.userId
        // script 取参 this.$route.params.userId
        
        //query和params区别
    query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传, 密码之类还是用params刷新页面id还在
    
    params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失
    

    3.router-link

    //创建路由实例  
    const router = new VueRouter({routes})  
    
    new Vue({  
        el: '#app',  
        data: {  
        },  
        methods: {  
        },  
        router  
    })
    
    
    
    // 路由出口
    <router-view></router-view>  
    
    router文件夹的index.js:
    
    
    import Vue from 'vue'
    import VueRouter from 'vue-router'
    
    Vue.use(VueRouter)
    //按需加载,导入
    const Home=(resolve)=>{
      import('../views/Home').then((module)=>
        resolve(module)
    )}
    const Support=(resolve)=>{
      import('../views/Support').then((module)=>
        resolve(module)
    )}
    const HtmlCss=(resolve)=>{
      import('../components/home/HtmlCss').then((module)=>
        resolve(module)
    )}
    const JS=(resolve)=>{
        import('../components/home/JS').then((module)=>
            resolve(module)
    )}
    
    
    
    const routes = [
      {path:'/',redirect:'/home/htmlCss'},
      {path:'/home',redirect:'/home/htmlCss'},
      {path:'/Home',
         component:Home,
         children:[{
             path:'htmlCss',
             component:HtmlCss,
         },{
             path:'js',
             component:JS,
         }
        ]
      },
      {path:'/Support',component:Support},
    ]
    
    const router = new VueRouter({
      routes:routes
    })
    
    export default router
    

    1.不带参数

    <router-link :to="{name:'home'}">
    <router-link :to="{path:'/home'}"> //name,path都行, 建议用name
    // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始。
    <router-link tag="li" :to="item.path" class="item" :class='{bg:index==activeIndex}'>
          <div @click="bgcChange(index)">{{item.discp}}</div>
    </router-link>
    
     path: "/about",
    

    2.带参数

    // params传参数 (类似post)
    // 路由配置 path: "/home/:id" 或者 path: "/home:id"
    // 不配置path ,第一次可请求,刷新页面id会消失
    // 配置path,刷新页面id会保留
    // script 取参 this.$route.params.id
    
    <router-link tag="li"  :to="{name:'home', params: {id:1}}">
    
    
    <router-link  tag="li"  :to="{name:'home', query: {id:1}}">
    

    4.go

    // 可能没用,没用就用push
       this.$router.go(-1)
    // 向前或者向后跳转n个页面,n可为正整数或负整数
       this.$router.go(n)
    

    5.location 原生js对象

    location.href-- 返回或设置当前文档的URL
    location.search -- 返回URL中的查询字符串部分。例如 http://www.dreamdu.com/dreamdu.php?id=5&name=dreamdu 返回包括(?)后面的内容?id=5&name=dreamdu
    location.hash -- 返回URL#后面的内容,如果没有#,返回空
    location.host -- 返回URL中的域名部分,例如www.dreamdu.com
    location.hostname -- 返回URL中的主域名部分,例如dreamdu.com
    location.pathname -- 返回URL的域名后的部分。例如 http://www.dreamdu.com/xhtml/ 返回/xhtml/
    location.port -- 返回URL中的端口部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回8080
    location.protocol -- 返回URL中的协议部分。例如 http://www.dreamdu.com:8080/xhtml/ 返回(//)前面的内容http:
    location.assign -- 设置当前文档的URL
    location.replace() -- 设置当前文档的URL,并且在history对象的地址列表中移除这个URL location.replace(url);
    location.reload() -- 重载当前页面
    

    6.history 原生js对象

    history.go() -- 前进或后退指定的页面数 history.go(num);
    history.back() -- 后退一页
    history.forward() -- 前进一页
    

    7.此外 navigator 原生js对象

    navigator.userAgent -- 返回用户代理头的字符串表示(就是包括浏览器版本信息等的字符串)
    navigator.cookieEnabled -- 返回浏览器是否支持(启用)cookie
    

    二、弹窗,就visible控制显示隐藏

    展开全文
  • 跳转到某个页面: window.location.href = './index.html'; window.navigate("b.html"); self.location='b.html'; top.location='b.html'; 返回上一页面: window.history.go(-1); window.history.back();

    跳转到某个页面:

     window.location.href = './index.html';
    
    window.navigate("b.html");
    
    self.location='b.html';
    
    top.location='b.html';
    

    返回上一页面:

    window.history.go(-1);
    
    window.history.back();
    
    展开全文
  • 今天在学校做2020年的题,碰到一个需求:用户在这个页面选择了症状,需要在下一个页面显示出用户选择的项; 这,这就触及到我的知识盲区了… 我突然想到前几天写Vue用了localStorage,总算是没空着,但还是想知道会不会有更...

    这会不会是今天写的最简单的一篇文…?


    前言

    今天在学校做2020年的题,碰到一个需求:用户在这个页面选择了症状,需要在下一个页面显示出用户选择的项;
    这,这就触及到我的知识盲区了…
    我突然想到前几天写Vue用了localStorage,总算是没空着,但还是想知道会不会有更好的方法.


    一、localStorage本地存储

    不能用sessionStorage,sessionStorage在当前会话关闭之后会进行销毁,存储的东西在下个页面全是undefined.

    //PageA
            var link = document.querySelector("a");
            var value1
            //这个value1
            /* localStorage.setItem(value1, "1");
            var localS = localStorage.getItem(value1);
            console.log(localS); */
            link.onclick = function () {
                localStorage.setItem(value1, "1");
                var localS = localStorage.getItem(value1);
            }
    

    当时提示我setItem应该传入两个参数,我觉得一个是key一个是value的话key应该不用提前声明,然后一跑,不行,这个value1还就得声明出来,哪怕你不赋值.

    //pageB
            var value1
            var localS = localStorage.getItem(value1);
            console.log(localS);
    

    然后在B页面接收value1我就更是觉得"这个总可以直接拿来赋值进变量了吧?" 结果还是不行,还是得声明出value1才能拿到getItem()的value1.
    这个方法好在在第二个页面拿到数据之后不用进行太多处理,能比较方便的使用.

    二、URL传值

    这个是我问了下同学他用的方法,感觉思维上更加合理一点,

    <!-- pageA -->
    <body>
        <a href="#">点击跳转页面</a>
        <script>
            var link = document.querySelector("a");
            var value1 = "value1";
            var value2 = "value2";
            link.onclick = function jumpPage() {
                window.open(`pageB.html?${value1}&${value2}`);
            }
        </script>
    </body>
    

    主要就是URL拼接,其他也没什么好说的:
    window.open("")

    目标页面路径URL:'要打开的地址 + ? + 参数1 + & + 参数2 + & + 参数3 + ...'
    

    在终点页面使用window.location.search()方法获取地址栏传过来的参数,得到"?参数1&参数2&参数3"

    可以将其赋值给一个变量准备分离出传来的值:
    var receiveValue = window.location.search
    不要问号:receiveValue.substr(1)

    <body>
        <p>我是pageB</p>
        <script>
        //输出都是有效的,可以解注释看看;
            var valueFromPageA = window.location.search;
            //console.log('valueFromPageA: ' + valueFromPageA);
            var aftercut = valueFromPageA.substr(1);
            //console.log('aftercut: ' + aftercut);
            var aftersplit = aftercut.split('&');
            //console.log('aftersplit: ' + aftersplit + '类型: ' + typeof (aftersplit));
            var value1 = aftersplit[0];
            var value2 = aftersplit[1];
            //console.log(value1, value2);
        </script>
    </body>
    

    比较糟糕的就是对于数据处理的步骤相比较来说会多一些.


    总结

    这是我个人的一些理解啦,如果您发现我的不足,我很高兴您能为我指出!
    )
    展开全文
  • 原声HTML跳转页面传递和接收参数
    1. 传递参数
                window.location.href = './order.html?info=' + info 
    

    2.接受参数,在window.οnlοad=function(){} 里写下面的代码

    var url = location.search; //获取url中"?"符后的字串 ('?modFlag=business&role=1')  
            var theRequest = new Object();
            if (url.indexOf("?") != -1) {
                var str = url.substr(1); //substr()方法返回从参数值开始到结束的字符串;  
                var strs = str.split("&");
                for (var i = 0; i < strs.length; i++) {
                    theRequest[strs[i].split("=")[0]] = (strs[i].split("=")[1]);
                }
                return theRequest
            }
    
    展开全文
  • function onTopClick() { ...但此方法第二次点击时无法跳转到指定位置 先将hash设置为空 再设置跳到指定元素即可 function onTopClick() { window.location.hash = ""; window.location.hash = "detail"; } ...
  • function scrollPosition(_obj) {//参数_obj可以是任何页面上存在的元素的id,或者是指定元素本身var targetX, targetY;if (!_obj) { //如果不指定锚点元素,就跳到页面顶端0,0位置targetX = 0;targetY = 0;} else ...
  • 一个 React-Native Android 的项目,启动之后是一个用 js 写的登录页面(login.js),然后我会跳转到一个 android 原生页面(NativeActivity.java),然后我现在希望从这个原生页面跳转到另一个 js页面(other.js)...
  • vue单页面应用模拟原生页面跳转的最优解决方案 为实现APP内嵌H5开发页面原生页面实现同样的跳转效果,我们利用Vue 提供了 <transition> 组件在单页面应用下来模拟原生页面跳转。 因为项目需要用<keep-...
  • js页面跳转,在日常的开发中,经常被用到,因为它灵活方便。本文为大家收集了几种js页面跳转的方式,供朋友们参考。方式1:复制代码 代码示例:window.location.href="jbxue.asp?backurl="+window.location.href;方式...
  • 原标题:js实现页面跳转的方法做网站时,难以避免会碰到页面跳转问题,以下总结一些js(java)实现页面跳转的方法。1、在当前页面打开新页面通过修改窗体对象window的地址链接属性location.href实现在当前页面打开新...
  • 我是使用uni-app的原生插件来操作以下内容的 1、uni-app,注意com.be.bevideoplugin.Helper是你原生插件Helper.java的路径 //获取当前Activity var main = plus.android.runtimeMainActivity(); //获取java辅助类 ...
  • //把form的target设置为iframe的name值即可 <form target = "rfFrame"> </form> <iframe src="" frameborder="0" style="display:none;" name="rfFrame">...关于提交后的数据获取,后台表示可以处理...
  • javascript中window.open()与window.location.href的区别window.open(‘index.html') 表示新增一个窗口打开 index.html 这个页面,并不刷新location.href(‘index.html') 表示在当前窗口重定向到新页面,打开并刷新 ...
  • onmousemove:鼠标指针在元素上移动时触发 on mouseenter:在鼠标光标从元素外部首次移动至元素范围内触发,不参与冒泡 mouseleave:鼠标移出 html事件 onload:当页面完全加载后在window上面触发 onunload:当页面...
  • nativeJs(successCallback, errorCallback) { return plus.bridge.exec("bridge", "goMainActivity", [plus.bridge.callbackId(typeof successCallback === 'function' ? successCallback : null, typ
  • script type="text/javascript"> function ppclick(){ setTimeout(function() { // IE if(document.all) { document.getElementById("clickMe").click(); } // 其它浏览器 else { ...
  • springboot跳转原生html

    2021-02-11 10:29:58
    项目结构 pom xsi:schemaLocation=...com.mysql.jdbc.Driver username: root password: root url: jdbc:mysql://localhost:3306/XXXXX?characterEncoding=UTF-8 jpa: show-sql: true freemarker: template-loader-path: /WEB-INF/ suffix: .html # 如果使用jsp页面请用下面的注释...
  • weex和安卓之间的页面跳转一般有三种情况: weex->weex native->weex weex->native 一.weex->weex(weex页面之间跳转) 例如:a页面跳转到b页面 a页面: navigator.push({ url:...
  • history的pushState()和replaceState()都可以使浏览器展示新的页面地址,但是并不会导致浏览器页面重新加载,甚至不会检查页面地址是否存在。 区别在于pushState()方法是向当前浏览器会话历史堆栈中添加一个状态(或...
  • //获取元素距离页面顶端的距离 const offsetTop = document.querySelector(‘class’).offsetTop ; window.scrollTo({ top: offsetTop, behavior: "smooth", // 平滑滚动 不需要平滑滚动可以去掉该属性 }); ...
  • a href='javascript:void(0)' id="deltoggle" onclick="return func()"></a> //页面加载时加载 func setTimeout(function() { var e = document.createEvent("MouseEvents"); e.initEvent("click", ...
  • js 延时页面跳转

    万次阅读 2021-01-28 09:53:34
    js 延时页面跳转 <script type="text/javascript"> function send(){ alert("转账码制作成功!!!"); window.history.back();//返回上一页 } setTimeout(send,2000);//等待2秒后执行 </script>...
  • 打算写一个带有注册登录页面的练习时,发现页面跳转html页面之后无法传递用户信息,百度了一下,发现JS有个window.sessionStorage方法可以实现本地存储信息 // 设置方法 sessionStorage.setItem(key,value); // 获得...
  • 最近开发的时候遇见了一个问题,在使用localion 对象进行页面跳转传递中文参数的时候,在接受的页面接受的参数是乱码,如何解决这个问题呢? 在传递参数时先使用escape() 函数对参数进行处理,在接受参数的时候用...
  • js获取上一个页面带过来的id方法之一 前提: 在viewspot.html页面中通过 <a :href="'updateviewspot.html?id='+place.sid">修改</a> 带id跳转到updatespot.html页面 在updatespot.html页面获取到id ...
  • 网页通常需要适配PC端和移动端,适配可以通过响应式布局判断屏幕尺寸来展示不同的效果,还可以通过编写两个页面,也就是PC端和移动端分别写一个页面,这种方式更方便功能模块的编写。通常情况下,PC端域名使用www,...
  • 比如说有个公园的列表页面,每个公园有固定的id,选择不同的公园 id 会通过 url 传递到下一个模板html界面,模板html通过id值向服务器发送请求,从而渲染不同的界面 <!-- list.html --> <div zone_id...
  • 最近一直在弄页面的事情,对页面方面的知识又巩固了一下。这次的内容如题,大家对代码有疑问或者是有更好的方法欢迎留言!js部分//标题对象var title = document.getElementById("title");//菜单对象var menu = ...
  • HTML页面之间跳转传值

    2021-06-10 00:33:52
    jquery.params.js用于两个HTML网页之间的传值。a.html?name=waley&age=20;b.html页面则可以这样获取:$.query.get("name)。例如;将a.html页面的数据传递到b.html页面:a.html:a页面$(function(){name = $("#...
  • 页面重定向跳转并post传参$mdata=json_encode($mdata);//如果是字符串无需使用jsonecho " function load_submit(){document.form1.submit()}load_submit();";或者echo "function load_submit(){document.form1....

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 25,427
精华内容 10,170
关键字:

原生js跳转页面