博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Vue路由使用总结
阅读量:6673 次
发布时间:2019-06-25

本文共 2828 字,大约阅读时间需要 9 分钟。

一、vue中路由的使用

1、定义组件

2、配置路由文件

import Vue from 'vue'import Router from 'vue-router'import Hello from '@/components/Hello'import Word from '@/components/Word';Vue.use(Router)export default new Router({    routes: [        {            path: '/',            component: Hello        },        {            path:'/index',            component:Word        }    ]})

3、配置路由插座<router-view></router-view>

4、路由文件注入到main.js文件中

import Vue from 'vue';import Router from 'vue-router';import App from './App';import router from './router/index';Vue.config.productionTip = false;/* eslint-disable no-new */new Vue({    el: '#app',    router,    render(h){        return h(App);    }})

二、配置路由的跳转

路由的跳转使用标签router-link

1、知道路径的跳转

  • Hello页面
  • word页面

2、to是通过绑定数据到上面

  • Hello页面
  • word页面

三、定义子路由

1、定义路由跳转

  • 路由1
  • 路由2

2、路由的跳转

{    path:'/word',    component:Word,    children:[        {            path:'router1',            component:Router1        },        {            path:'router2',            component:Router2        }    ]}

四、路由之间传递参数params方式

1、路由跳转的时候定义要传递参数形式

{    path:'router1/:id',    component:Router1},

2、页面跳转的时候传递参数

  • 路由1
  • 3、在组件中接收传递过去的参数

    export default{    mounted(){        console.log(this.$route);        console.log(this.$route.params.id);    }}

    五、路由之间传递参数query方式

    1、在路由跳转地方传递query参数

  • 路由2
  • 2、在组件的mounted中接收

    export default{    mounted(){        console.log(this.$route);        console.log(this.$route.query.id);    }}

    六、关于vue脚本中操作页面的跳转及传递参数

    1、使用push实现页面跳转

    methods:{    go1(){        // 使用params传递参数        this.$router.push({path:'/word/router1/123'});    }}

    2、使用replace实现页面的跳转

    methods:{    go2(){        // 使用query传递参数        this.$router.replace({path:'/word/router2',query:{id:123}});    }}

    七、关于前进与后退


    1、页面代码

    2、事件方法代码

    methods:{    next(){        this.$router.go(1);    },    prevent(){        this.$router.go(-1);    }}

    八、重定向

    1、配置路由

    {    path:'router',  // path路径     redirect:'/word/router3'  // 重定向指向的路径}

    2、配置页面跳转

  • 路由4
  • 3、重定向函数

    {    path:'router5',    redirect:()=>{        console.log(arguments);        return '/word/router3';    }}

    九、路由的钩子函数

    1、beforeEnter的使用

    {    path:'router2',    component:Router2,    beforeEnter(to,form,next){        console.log('///',arguments);        setTimeout(()=>(next()),1000);    }},

    2、beforeRouteUpdate的使用

    3、beforeRouteLeave的使用


    十、路由实现组件间传递数据

    1、直接传递到组件

    <Myhead v-bind:name1="name1"></Myhead>

    1

    2、组件Myhead中接收

    export default{    props:['name1'],}

    3、传递到router-view上

    export default{ name:'word', props:['age'],}

    转载地址:http://jqgxo.baihongyu.com/

    你可能感兴趣的文章
    c# 判断文件是否发生了变化
    查看>>
    Remove menucool tooltip trial version
    查看>>
    node.js 签到
    查看>>
    SQL注入漏洞 详解
    查看>>
    输入框提示--------百度IFE前端task2
    查看>>
    实战p12文件转pem文件
    查看>>
    如何去掉数据库重复记录并且只保留一条记录
    查看>>
    ubuntu 无线上网不稳定
    查看>>
    模板 数据结构
    查看>>
    【Search a 2D Matrix】cpp
    查看>>
    POJ 1741 Tree(树的点分治,入门题)
    查看>>
    Opencv3.1.0 & Win10/Win7 64位 contrib编译
    查看>>
    MPMoviePlayerController播放远程视频存在问题
    查看>>
    一个已经存在的CCSprite怎么替换新的图片
    查看>>
    更加安全的存取账户密码(SDK)
    查看>>
    NSNotificationCenter 的详细说明
    查看>>
    List/Vector
    查看>>
    黄聪:FFmpeg 使用指南
    查看>>
    能否不同udp socket绑定到同一IP地址和port
    查看>>
    C#:CodeSmith根据数据库中的表创建C#数据模型Model + 因为没有钱买正版,所以附加自己写的小代码...
    查看>>