精华内容
下载资源
问答
  • 在使用vue-router时,咱们能够很方便地实现单页面应用,当咱们想要跳转到“另外一个页面”的时候,只要调用vue-routerAPI中的方法,传入相应的路由做为参数便可。javascript单页面应用的一个特色是,若是某个路由...

    在使用vue-router时,咱们能够很方便地实现单页面应用,当咱们想要跳转到“另外一个页面”的时候,只要调用vue-routerAPI中的方法,传入相应的路由做为参数便可。javascript

    单页面应用的一个特色是,若是某个路由已经在本地加载过了,即已经将生命周期走到了mounted的时候,若是咱们再进入这个页面,不会再执行created和mounted里面的方法。vue

    简单来讲,有两个页面A和B,咱们使用单页面的形式,使用vue-router来实现页面的“跳转”,当咱们一开始打开A页面时,执行了页面的created和mounted,跳转到B页面,执行了B页面的created和mounted,可是,当咱们从B页面“跳转”回A页面时,咱们发现不会执行created和mounted了,由于这个Vue组件已经加载了,它不会重复执行方法,若是咱们要在路由发生变化的时候执行方法,那咱们就须要监听$route的变化,在它变化的时候执行方法。java

    在Vue的官方文档中,直接在监听后传入一个方法对应的字符串,在路由发生变化的时候自动执行方法vue-router

    watch: {

    // 若是路由有变化,会再次执行该方法

    '$route': 'fetchData'

    },

    methods: {

    fetchData () {

    this.error = this.post = null

    this.loading = true

    // replace getPost with your data fetching util / API wrapper

    getPost(this.$route.params.id, (err, post) => {

    this.loading = false

    if (err) {

    this.error = err.toString()

    } else {

    this.post = post

    }

    })

    }

    }

    固然,若是咱们要经过判断路由发生的特定变化来执行方法,能够使用handlerapp

    watch:{

    "$route":{

    handler(route){

    const that=this;

    if(route.name=='Hello'){

    that.fetchData();

    }

    }

    }

    }

    这样子就会针对路由的值来执行方法了。post

    展开全文
  • 原生JS实现单页面路由跳转

    千次阅读 2018-09-27 17:32:16
    但是要做成单页面应用;用框架有点浪费资源,只能自己做一个简单的单页面功能; 原生JS实现路由跳转 function getEle(){ let S = document.getElementById("app").querySelectorAll("*"), res...

    最近公司的一个小项目,需求只有几个页面;但是要做成单页面应用;用框架有点浪费资源,只能自己做一个简单的单页面功能;

    原生JS实现路由跳转

     function getEle(){
            let S = document.getElementById("app").querySelectorAll("*"), res = [];
            S.forEach(e =>{
                e.dataset.path ? res.push(e) : null
            });
            return res
        }
    window.Vue = {
            //监听路由变化
            tabPath(){
                let routers = getEle();
                let path = window.location.href.split("#")[1]?window.location.href.split("#")[1].split("?")[0]:"/"
                routers.forEach(e =>{
                    e.innerHTML = "";
                    e.dataset.path === path ? e.style.display = "block" : e.style.display = "none"
                })
            },
            //路由跳转
            Router(options){
                let type = typeof options, path = "";
                if(type === "string"){
                    path = options
                } else if(type === "object"){
                    path = options.path
                }
                window.location.hash = path
            },
            //初始化
            init(fn){ //此处的fn相当于生命周期,传入对应path所需要执行的回调
                window.onload = () =>{
                    this.tabPath();
                    typeof fn==="function"?fn():null;
                };
                window.onhashchange = () =>{
                    this.tabPath();
                    typeof fn==="function"?fn():null;
                }
            }
        };
    

    html 部分 需要先把需要的组件现在页面中

    <div id="app">
        <div data-path="/" id="index"></div>
        <div data-path="/product" id="product">
    
        </div>
        <div data-path="/customItem" id="custom">
    
        </div>
    </div>
    

    虽然缺点很多,但是简单的路由跳转功能还是能实现;
    总结了一下缺点;

    1. 没有使用webpack所以应用外部资源要用到绝对路径“http://host/path”这样的;不然路径会报错;所以我把css、html、js都放到了index.html文件中;开发过程中要分区并且明确注释;一个文件的代码实在太多,一两千行;图片资源和ajax的路径都要使用“http://host/path”这样的格式;
    2. 组件的所有内容都要动态去创建;html代码中写的不管用,因为在切换路由的时候需要把组件里面的内容全部清空;不然等这个组件下一次出现的时候动态创建的内容就会重复;
    3. 数据双向绑定还没有完成;应该项目中数据交互不是很平凡;所以都是通过事件驱动数据;
    4. 毕竟是原生实现;所以细节比较多;也比较麻烦;不过接触的基础点多,也学习了不少之前没有注意到的东西;比如在事件中使用forEach处理数据,满足条件时结束代码运行,这时候return不管用了,这就是forEach的特性:break、return都无法阻止遍历;
      优点:
    5. 没有使用任何插件和框架还有UI等等,所以项目上线时打包的代码会很少,大概也就几十K的样子;
    6. 开发的时候比较自由;所有的效果都能通过自己封装的东西来实现;不收框架限制;也不用怕代码太多影响性能
    7. 比较适合只有几个页面的微型服务;
    展开全文
  • 单页面应用路由的实现方式

    千次阅读 2017-09-20 22:27:14
    好久不曾写博客了,九月以来一直忙着笔试面试,都已经两旬过去了,如今还是两手空空,再怎么受挫,再怎么不如意,该走的路一步都不能少,今天就来总结下面试时被问:到单页面应用路由是如何实现的?如今前端框架...

    好久不曾写博客了,九月以来一直忙着笔试面试,都已经两旬过去了,如今还是两手空空,再怎么受挫,再怎么不如意,该走的路一步都不能少,今天就来总结下面试时被问:到单页面应用的路由是如何实现的?


    如今前端框架层出不穷,手机端单页面应用越来越多的出现在人们的视野中,作为前端开发者,掌握一两中主流框架是很有必要的,了解ajax的都知道ajax异步刷新页面是不会存在历史记录中的,也就是我们不能通过浏览器的前进和后退按钮来跳转页面,但是聪明的猿们怎么会没有办法呢?猿们通过location.hash+hashchange来实现,也可以通过history.pushState+popstate来实现。下面看一下两种方法如何来使用。

    一 . location.hash+hashchange

    原理:location.hash获得的是浏览器地址栏url的散列部分,也就是/后面的内容,我们可以通过改变location.hash的值,来改变地址栏的url地址,一旦地址栏的url改变,就会触发hashchange事件,我们可以在该事件中添加回调函数,从而来刷新页面的内容。

    具体看下面的代码:

    function Router (){
            this.routers = {};
            this.currentUrl = '';
        }
    
        Router.prototype.toRouter = function (path, callback){
            this.routers[path] = callback;
        }
    
        Router.prototype.refresh = function (){
            this.currentUrl = location.hash.slice(1) || '/';
            this.routers[this.currentUrl]();
        }
    
        Router.prototype.init = function (){
            window.addEventListener('load', this.refresh.bind(this), false);
            //监听url改变的事件,触发回调函数
            window.addEventListener('hashchange', this.refresh.bind(this), false);
        }
    
        var router = new Router(); 
        router.init();
    
        function changecolor(color){
            var body = document.getElementsByTagName('body')[0];
            body.style.backgroundColor = color;
        }
    
        //为每个url添加回调函数,来刷新页面
        router.toRouter('/',changecolor.bind(null,'skyblue'));
        router.toRouter('/blue',changecolor.bind(null,'blue'));
        router.toRouter('/green',changecolor.bind(null,'green'));

    二 . history.pushState +popstate

    先说一下pushState方法的参数,history.pushState(state, title, url)。该方法有三个参数,第一个state是一个json对象,在触发popstate事件是很有用;第二个是一个字符串,目前大多数浏览器忽略该参数,所以一般传值为null就可以了;第三个参数是url地址,也是一个字符串。

    原理:点击页面的url或者在地址栏输出url,将该url和定义好的state对象加入浏览器历史记录中,此时导航栏的地址就为当前新加入的地址,只要点击浏览器的前进后退按钮,就会触发popstate事件,就可以执行事件绑定的方法来更新页面,从而达到回退前进的效果。

    代码:

        history.pushState({
            name: 'red',
            url: '/red',
            title: '红色页面'
        }, null, '/red');
    
        history.pushState({
            name: 'green',
            url: '/green',
            title: '绿色页面'
        }, null, '/green');
    
        window.addEventListener('popstate', function (e) {
            //伪函数,只是模仿事件响应之后的操作
            ajax(e.state.url, callback);
        }, false);

    还有一个history.replaceState,只是替换当前的url,不会加入历史记录中。


    以上这两种方式就是单页面应用如何实现路由刷新的方式,很惭愧,学习前端这么久了,才知道这两种方法,希望可以对正在学习的大家有所帮助。

    展开全文
  • 在使用vue-router时,我们可以很方便地实现单页面应用,当我们想要跳转到“另一个页面”的时候,只要调用vue-routerAPI中的方法,传入相应的路由作为参数即可。 单页面应用的一个特点是,如果某个路由已经在本地...

    在使用vue-router时,我们可以很方便地实现单页面应用,当我们想要跳转到“另一个页面”的时候,只要调用vue-routerAPI中的方法,传入相应的路由作为参数即可。

    单页面应用的一个特点是,如果某个路由已经在本地加载过了,即已经将生命周期走到了mounted的时候,如果我们再进入这个页面,不会再执行created和mounted里面的方法。

    简单来说,有两个页面A和B,我们使用单页面的形式,使用vue-router来实现页面的“跳转”,当我们一开始打开A页面时,执行了页面的created和mounted,跳转到B页面,执行了B页面的created和mounted,但是,当我们从B页面“跳转”回A页面时,我们发现不会执行created和mounted了,因为这个Vue组件已经加载了,它不会重复执行方法,如果我们要在路由发生变化的时候执行方法,那我们就需要监听$route的变化,在它变化的时候执行方法。

    在Vue的官方文档中,直接在监听后传入一个方法对应的字符串,在路由发生变化的时候自动执行方法

    watch: {
        // 如果路由有变化,会再次执行该方法
        '$route': 'fetchData'
      },
    methods: {
        fetchData () {
          this.error = this.post = null
          this.loading = true
          // replace getPost with your data fetching util / API wrapper
          getPost(this.$route.params.id, (err, post) => {
            this.loading = false
            if (err) {
              this.error = err.toString()
            } else {
              this.post = post
            }
          })
        }
      }

    当然,如果我们要通过判断路由发生的特定变化来执行方法,可以使用handler

    watch:{
      "$route":{
        handler(route){
          const that=this;
          if(route.name=='Hello'){
            that.fetchData();
          }
        }
      }
    }

    这样子就会针对路由的值来执行方法了。

    展开全文
  • 10分钟彻底搞懂单页面应用路由

    千次阅读 2020-08-05 16:09:49
    今天,顺势就单页面应用路由,跟大家唠个五毛钱,如果唠得不好……退…一块钱? 单页面应用特征 假设: 在一个 web 页面中,有1个按钮,点击可跳转到站内其他页面。 多页面应用: 点击按钮,会从新加载一个html资源...
  • 单页面应用特征 「假设:」在一个 web 页面中,有1个按钮,点击可跳转到站内其他页面。 「多页面应用:」点击按钮,会从新加载一个html资源,刷新整个页面; 「单页面应用:」点击按钮,没有新的html请求,只发生...
  • HTML5中对浏览器history对象方法进行了扩展,前端单页面应用路由实现本质上都是基于history对象方法的封装实现用户url访问的存储记录与页面更新。 二、history对象新增方法 1.pushState(state,title,url) 该...
  • 一般单页面应用,例如vue都是通过vue-router来做跳转,不会像多页应用一样另起新页面显示,但是也不排除一些业务上的需要。 一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定: this.$router.push({...
  • 文章目录JS 前端路由:单页面应用的路由原理和实现简介参考完整示例代码正文从页面刷新到路由跳转单页面应用的优劣前端路由分类前端路由实现项目架构Hash 实现History 实现结语 简介 在浏览器的默认行为中,不同的 ...
  • 例如:从首页跳入内部页面,windows.history 会记录相关页面跳转信息,但是由于是单页面应用,无法通过 @Override public void onPageFinished(WebView view, String url) { super.onPageF...
  • 一般单页面应用,例如vue都是通过vue-router来做跳转,不会像多页应用一样另起新页面显示,但是也不排除一些业务上的需要。一般情况下单页面应用的路由跳转我们都是通过简单的一句话搞定:this.$router.push({name: ...
  • 1.安装node(emmm…这个自行百度,不难) 2.新建一个空文件夹,然后右键打开命令窗口 3.安装全局的vue-cli 命令: npm install vue-cli -g ...7.把创建的这个文件拉进编辑器里,开始敲代码,创建单页面切换 c...
  • SPA ( single page App ) 单页面应用 多页面应用 有多个html文件,通过a标签的连接联通各个页面 缺点 开发起来太冗余,编译、压缩很耗时间 页面之间的跳转速度太慢,这个时候就会出现一个严重的问题,白屏 ...
  • 单页面应用(SPA)1、不产生页面跳转,提高用户体验。(链接使用锚点)2、把多个功能(视图)集成在一个页面中。根据不同的逻辑展示不同的视图(路由)(锚点)3、动态生成数据,通过Ajax异步获取。4、和Tab栏不同(SPA可以点击...
  • 单页面应用路由的实现原理是什么? react-router 是如何跟 react 结合起来的? 如何实现一个简单的 react-router? hash 的历史 最开始的网页是多页面的,后来出现了 Ajax 之后,才慢慢有了 SPA。...
  • 在APP中使用WebView组件展示H5页面,在APP上自定义一个头部回退组件,点击返回按钮,如果H5页面跳转则返回H5页面的上一页,如果没有跳转则退出当前的APP页面。 原本的想法: 通过WebView的onNavigationStateChange()...
  • 5 配置单页面应用的nginx代理 第一个location表示访问xxx.json或者xxx.do的时候会跳转到8080的tomcat下的对应地址。第二个location表示访问其他路径都会跳到8080的根路径上,如果根路径的js支持路由功能就可以...
  • 在使用vue做项目以来一直做的是单页面应用的移动端项目,最近一直在做pc端的项目,所以就会遇到各种各样的奇葩需求,话说你们见过那个测试pc段项目的时候将浏览器放大到最大倍数,真是醉醉的了,这样来的话google也...
  • 首先简单说一下单页面应用程序 单页面应用程序 SPA : single page application 单页面应用程序 MPA : Multiple Page Application 多页面应用程序 单页面 web 应用 就是只有一个web页面的应用 是加载单个...
  • HTML5为history对象添加了两个新方法,history.pushState()和history.replaceState(),用来在浏览历史中...所以有人称这种站点为“单页面应用”。总的来说,这个方案对主流浏览器的支持程度很高,是目前的主流方案。
  • 路由是AngularJS构建的单页面应用的基础。 单页面应用,又名SPA(此spa非彼spa),是singleton page application的缩写。 单页面应用:程序在执行的过程中,我们不论访问任何链接,都会在同一页面中展示数据...
  • 【router-view】 + 【keep-alive】单页面多路由 实现component跳转但不覆盖原来页面记录 【router-view】用于页面渲染指定路由对应的组件 <router-view></router-view> 假如所有组件都要缓存历史...
  • VUE开发单页应用时,页面不会重新加载,默认返回的是页面原先的滚动位置。如果要返回顶部,或者其他位置就需要一些配置了。 方式1 created或者mounted里加上 window.scrollTop(0,0); 方式2(官网提供方法) ...
  • 路由功能是由 routeProvider服务 和 ng-view 搭配实现,ng-view相当于提供了页面模板的挂载点,当切换URL进行跳转时,不同的页面模板会放在ng-view所在的位置; 然后通过 routeProvider 配置路由的映射。 环境...
  • 路由 route -> 单页面应用程序 一个页面在展示多种数据的时候不是进行页面的跳转, 而是在页面中设置一个足够大的容器 在切换显示的时候, 利用 ajax 请求数据, 拿到数据后利用 js 将数据渲染到容器中, 以 展示...
  • 微信小程序之页面跳转路由

    千次阅读 2019-07-25 23:34:10
    微信小程序一共有五个页面跳转路由: 1、wx.switchTab(Object object)----跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面 2、wx.reLaunch(Object object)----关闭所有页面,打开到应用内的某个页面 3、wx....
  • 基于mui框架开发的单页面应用框架(含demo),实现页面跳转路由,单页面开发html应用,避免页面跳转导致的用户体验差的问题
  • AngularJS ng路由应用 上回说道,ng路由的基本概念,基本了解了ng路由是做什么用的,这一回我们说一下ng路由的指令,语法,还有一些描述,用一个小案例来详细为大家讲解一下ng路由的实际用途。 ng路由: ng...
  • 所谓单页面应用就是在同一个页面动态加载不同的内容,而这里的“跳转”可以理解为是局部页面的跳转。 AngularJS是通过改变location地址来实现加载不同的页面内容到指定位置,下面是一个简单应用AngularJS路由来实现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 23,479
精华内容 9,391
关键字:

单页面应用路由跳转