vue-router 导航完成后获取数据的实现方法

2025-12-19 05:54:45

created：实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。

使用生命周期的 created() 函数，在组件创建完成后调用该方法。

created(){
　　// 组件创建完成后获取数据
　　// 此时data已经被监听了
　　this.fetchData();
},
watch:{
　　'$route':'fetchData'
},
methods:{
　　fetchData(){
　　　　this.error = null;
　　　　this.post = null;
　　　　this.loading = true;
　　　　this.$axios.get('http://127.0.0.1:8888/post')
       .then(res=>{
　　　　　　this.loading = false;
　　　　　　console.log(res.data);
　　　　　　this.post = res.data;
　　　　})
　　　　.catch(err=>{
　　　　　　this.error = err.toString();
　　　　})
　　}
}

完整代码如下：

<div id="app"><div>
    <!-- 导航完成后获取数据，让我们在数据获取期间可以展示loading....状态 -->
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript" src="./axios.js"></script>
    <script type="text/javascript" src="./vue-router.js"></script>
    <script type="text/javascript">

        var Index = {
            template:`
                <div>我是首页</div>
            `
        };

        var Post = {
            data(){
                return{
                    loading:false,
                    error:null,
                    post:null
                }
            },
            template:`
                <div>
                    <div class='loading' v-if='loading'>
                        loading...
                    </div>
                    <div class='error' v-if='error'>
                        {{error}}
                    </div>
                    <div class='content' v-if='post'>
                        <h2>{{post.title}}</h2>
                        <p>{{post.body}}</p>
                    </div>
                </div>
            `,
            created(){
                // 组件创建完成后获取数据
                // 此时data已经被监听了
                this.fetchData();

            },
            watch:{
                '$route':'fetchData'
            },
            methods:{
                fetchData(){
                    this.error = null;
                    this.post = null;
                    this.loading = true;
                    this.$axios.get('http://127.0.0.1:8888/post')
                    .then(res=>{
                        this.loading = false;
                        console.log(res.data);
                        this.post = res.data;
                    })
                    .catch(err=>{
                        this.error = err.toString();
                    })

                }
            }
        }

        var router = new VueRouter({
            routes:[
                {
                    path:'/index',
                    name:'index',
                    component:Index
                },
                {
                    path:'/post',
                    name:'post',
                    component:Post
                }
            ]
        });

        var App = {
            template:`
                <div>
                    <router-link :to = "{name:'index'}">首页</router-link>
                    <router-link :to = "{name:'post'}">我的博客</router-link>

                    <router-view></router-view>
                </div>
            `
        };

        Vue.prototype.$axios = axios;

        new Vue({
            el:'#app',
            template:`<App/>`,
            components:{
                App
            },
            router
        });
    </script>

到此这篇关于vue-router 导航完成后获取数据的文章就介绍到这了,更多相关vue-router 获取数据内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

vue-router之实现导航切换过渡动画效果

过渡动效提供了transition的封装组件,添加过渡动画,通过添加或删除css类名来实现. 过渡的css类名: v-enter 进入过渡的开始状态 v-enter-active 进入活动状态 v-enter-to 进入的结束状态 v-leave 离开过渡的开始状态 v-leave-active 离开活动状态 v-leave-to 离开结束状态过渡模式: in-out 先进后出 out-in 先出后进用法: 做一个淡隐淡出效果把想要运动的元素放到<transition></tra
详解vue-router导航守卫

当做Vue-cli项目的时候需要在路由跳转前做一些验证,比如登录验证,是网站中的普遍需求. 对此,vue-router 提供的 beforeEach可以方便地实现全局导航守卫(navigation-guards).组件内部的导航守卫函数使用相同,只是函数名称不同(beforeRouteEnter .beforeRouteUpdate(2.2 新增) .beforeRouteLeave). 钩子(Hook),早期编程可能有个概念叫句柄,不知道将两者类比而且强行归为一类是不是合适.钩子的用处是在某个
详解vue-router数据加载与缓存使用总结

之前开发了一个单页面应用,按照深度,分为三层:目录页.一级子页(标签页.故事页等).二级子页(故事编辑页). 这三类页面都共享一个完整的数据model,从上级页面进入下一级页面时,能够加载相应数据:回到上一级时,数据有更新.举个栗子,从故事页点击"编辑"按钮,进入故事编辑页则默认填充点击的"编辑"按钮所对应的故事数据:而当在故事编辑页更新数据,返回到故事页时,刚刚更新的信息也能在故事页展示. 对于这项需求,我们需要解决如下几个问题: 三层页面共享数据: 进入或退回当
使用vue-router在Vue页面之间传递数据的方法

前言几周前,我写了关于 Vue 路由的使用和在 Vue 页面导航的文章.这是在应用程序中探索的一个基本例子. 通常,在将导航构建到应用程序中时,您会发现需要将数据从一个页面传递到另一个页面.(不通顺)例如,您遵循 master-detail 模式,其中您有一个数据列表,通过更深入地挖掘可以获得关于列表中特定项的更多信息. 我们将学习如何使用路由和 URL参数以及查询参数在 Vue 页面之间传递数据. 如果你还没有读过我之前的教程或者不熟悉 vue-router 库,我建议你温习一下. 利用 U
Vue + Vue-router 同名路由切换数据不更新的方法

在默认情况下, 同名路由之间的切换, 由于组件可以服用, 放在ready里获取数据, 是不会执行的, 有两种方法可以解决注意: 该问题仅存在于 vue1 方法1: 将数据获取放到route.data下~ route: { data({to: {params: { page }}}) { return Promise.all([ this.getApi() ]).then(() => { }) } } 方法2: 设置route.canReuse = false, 强制组件不复用~ route:
vue-router二级导航切换路由及高亮显示的实现方法

这里以网易云音乐作为示例,效果图: 我们先一层一层写导航先设计第一层 1.设计导航页面样式第一个导航页面为Discover Discover.vue:  <template> <div> 发现 </div> </template> <script> export default { name: "discover", data() { return { }; } }; </script&g
vue-router 导航钩子的具体使用方法

vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消. 全局钩子 1.router.beforeEach 注册一个全局的 before 钩子: const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 每个钩子方法接收三个参数: to: Route: 即将要进入的目标路由对象 from: Route: 当前导航正要离开的路由 next: Function:
vue-router路由与页面间导航实例解析

vue-router是Vue.js官方的路由插件,它和vue.js是深度集成的,适合用于构建单页面应用.vue的单页面应用是基于路由和组件的,路由用于设定访问路径,并将路径和组件映射起来.传统的页面应用,是用一些超链接来实现页面切换和跳转的.在vue-router单页面应用中,则是路径之间的切换,也就是组件的切换. vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不
vue-router 导航完成后获取数据的实现方法

created:实例已经创建完成之后被调用.在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算, watch/event 事件回调.然而,挂载阶段还没开始,$el 属性目前不可见. 使用生命周期的 created() 函数,在组件创建完成后调用该方法. created(){ // 组件创建完成后获取数据 // 此时data已经被监听了 this.fetchData(); }, watch:{ '$route':'fetchData' }, methods:{
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法

1. 引入jquery和vue.js <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="http://cdn.bootcss.com/vue/2.2.2/vue.min.js"
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作

在vue项目中组件间相互传值或者后台获取的数据需要供多个组件使用的情况很多的话,有必要考虑引入vuex来管理这些凌乱的状态,今天这边博文用来记录这一整个的过程,后台api接口是使用webpack-server模拟的接口,这个前面的文章中有提到,需要的可以去翻阅. 整个的流程是在组件的created中提交dispatch,然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据,然后在组件的计算属性中获取state的数据并渲染在页面上首先新需要在项
vue router导航守卫（router.beforeEach()）的使用详解

导航守卫导航守卫主要用来通过跳转或取消的方式守卫导航.有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的.(记住参数或查询的改变并不会触发进入/离开的导航守卫.你可以通过观察$route对象来应对这些变化,或使用beforeRouteUpdate的组件内守卫.) 好久没写一些东西了,总是感觉有啥缺少的.~~~~恰好碰到最近在写一个移动端项目,遇到了如何使同一个链接在不同条件下跳转到不同路由组件问题,譬如大家经常看到手机中没登录跳转登录页,登陆后跳转个人信息页等.废话不多说了
vue改变循环遍历后的数据实例

废话不多说了,直接上代码吧! <dd class="clearfix" v-for="(item,index) in tableDataList" :class="index%2 != 0 ? 'dd-bg' : ''"> <div class="indexItem indexItem3 tal" title=""><span>{{item.status}}{{count
vue router 跳转后回到顶部的实例

在main.js中加上这段代码 // 跳转后返回顶部 router.afterEach((to,from,next) => { window.scrollTo(0,0); }) 以上这篇vue router 跳转后回到顶部的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.
Vue Router 实现动态路由和常见问题及解决方法

个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现
vue路由跳转后刷新指定页面的方法

做项目遇到一个坑:A页面带参跳转到B页面,第二次跳转时的参数与第一次时的参数不同,但是后台查询时还是使用的第一次的参数.需要手动刷新之后,才会使用第二次参数. 鉴于时间原因直接使用刷新页面监听路由的方法.在准备跳转的A页面添加路由跳转监听事件,达到每次A页面跳转B页面时,B页面都会再次重新加载页面. 添加完成后,A页面跳转B页面,B页面成功刷新.正当我高兴的以为又解决了一个bug时,突然发现我从A页面跳转到C页面时,C页面竟然也在发生页面刷新现象.当时着实是将小主吓了一大跳.要知道正是因为要填写
Vue 中使用vue2-highcharts实现曲线数据展示的方法

1.要实现的效果如下图: 2.vue前端页面如下: <template> <div> <div> <div> <img src="../assets/index/back.png" class="rank-head-back" @click="routerBack"/> <span >历史曲线</span> </div> </div> &l
vue页面跳转后返回原页面初始位置方法

vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =

vue-router 导航完成后获取数据的实现方法

相关推荐

随机推荐