• vue 路由参数的获取


    路由的参数设置是路由的反斜杠加冒号,如下代码:

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'

    Vue.use(Router)

    export default new Router({
    routes: [
    {
    path: '/:id',
    name: 'HelloWorld',
    component: HelloWorld,
    props : true
    }
    ]
    })
    获取路由的参数有两种:
    如下代码中加参数1
    <template>
    <div id="app">
    <router-link to = '/1'>当前页</router-link>
    <router-view/>
    </div>
    </template>

    <script>
    export default {
    name: 'App'
    }
    </script>
    获取参数id如下方法:
    <template>
    <div class="hello">
    helloword
    </div>
    </template>

    <script>
    export default {
    name: 'HelloWorld',
    props:['id'],
    data () {
    return {
    msg: 'Welcome to Your Vue.js App'
    }
    },
    mounted () {
    console.log(this.$route.params.id);
    console.log(this.id)
    },
    methods:{

    }
    }
    可以通过this.$route.params.id,如果在路由中设置props属性,这样,就可以在组件中设置props属性接收id那样的话就可以通过this.id来获取,这样的方法更简便。
     
  • 相关阅读:
    Unity-JobSystem
    Unity-ECS-实践
    Unity-Editor
    网络编程-HTTPS
    网络编程-UDP、TCP
    Cast, OfType
    DataGrid
    bat 开机自动执行脚本
    bat 单行输出彩色信息
    工厂模式
  • 原文地址:https://www.cnblogs.com/zhx119/p/10874492.html
Copyright © 2020-2023  润新知