zoukankan      html  css  js  c++  java
  • vue-router参数传递

    1.在vue-router中,有两大对象被挂载到了实例this
    2.$route(只读、具备信息的对象)、$router(具备函数功能)
    3.查询字符串方式传递参数
    1).去哪里 <router-link :to="{name:'detail',query:{id:1}}">xxx</router-link>
    2).路由导航设置{name:'detail',path:'/detail',组件}
    3).去了干嘛,获取路由参数(要注意是query还是params和对应的id名) this.$router.query.id

    4.path方式传递参数
    1).去哪里 <router-link :to="{name:'detail',params:{id:1}}">xxx</router-link>
    2).路由导航设置(path方式需要在路由规则上加上/:xxx){name:'detail',path:'/detail/id',组件}
    3).去了干嘛,获取路由参数(要注意是query还是params和对应的id名) this.$router.params.id

    具体代码

    main.js

    import Vue from 'vue'
    import App from './App'
    import vueRouter from 'vue-router'
    import list from './components/list.vue'
    import listinfo from './components/listinfo.vue'
    Vue.config.productionTip = false
    Vue.use(vueRouter);
    Vue.component("list",list);
    Vue.component("listinfo",listinfo);
    let router=new vueRouter({
    routes:[
    {name:"lis",path:"/list",component:list},
    {name:"listinfo",path:"/listinfo",component:listinfo}
    ]
    })
    /* eslint-disable no-new */
    new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: { App }
    })

    app.vue

    <template>
    <div id="app">
    <router-view></router-view>
    </div>
    </template>

    list.vue

    <template>
    <div>
    <ul>
    <li v-for="(item,index) in list" :key="index">
    <router-link :to="{name:'listinfo',query:{id:item.id}}"> {{item.name}}</router-link>
    </li>
    </ul>
    </div>
    </template>

    <script>
    export default {
    data(){
    return{
    list:[
    {name:"第一",id:1},
    {name:"第二",id:2},
    {name:"第三",id:3},
    {name:"第四",id:4},
    ]
    }
    }

    }
    </script>

    <style>
    </style>

    listinfo.vue

    <template>
    <div>
    详情

    </div>
    </template>

    <script>
    export default{
    data(){
    return{

    }
    },created(){
    console.log(this.$route.query);
    // console.log(this.$route.params);
    },mounted(){

    }
    }
    </script>

    <style>
    </style>

  • 相关阅读:
    MongoDB结构划分
    iphone下scrollview图片浏览器小记
    图文详解linux/windows mysql忘记root密码解决方案
    【记】Javascript遍历对象属性的方法
    【jQuery】jQueryUI中的datepicker在overflow下的两点点小小的问题。
    第一个测试文章
    【记】Javascript的正则表达式RegExp
    【记】IE下input标签中的paddingleft和paddingright
    【CSS】关于IE、FireFox中table强制换行的总结
    【DOCTYPE】兼容模式和标准模式
  • 原文地址:https://www.cnblogs.com/zhousen34/p/7651374.html
Copyright © 2011-2022 走看看