一、使用VueResource发起get请求

1.this.$route.query.id:在router-link中会配置query.id

<template>
    <div>
        <div>
            <p>标题:{{ blog.title }} </p>
            <p>发布于: {{blog.created_at}}</p>
            <div v-html="blog.body">
            </div>

        </div>
    </div>
</template>
<script>
    export default {
        data: function () {
            return {
                blog: {}
            }
        },
        mounted() {
            this.$http.get('api/interface/blogs/show?id=' + this.$route.query.id).then(
                (response) => {
                    console.info(response.body)
                    this.blog = response.body.result
                },
                (response) => {
                    console.error(response)
                }
            );
        }
    }
</script>

二、router-link配置

指定了query.id

  		<ul>
            <li>
                <router-link :to="{name: 'blog_test',query:{id:11}}">
                    blog_test,get请求
                </router-link>
                : 请点击这里~~~
            </li>
        </ul>

三、router index.js配置

注意需要引入 import xx…

 	{
          path: '/blog_test', //路径
          name: 'blog_test',//vue内部使用的名称
          component: Blog_test //对应的.vue页面名字
      }

Logo

前往低代码交流专区

更多推荐