vue系列文章（26）vue路由传参

经常遇到这样的问题，某个连接中需要根据id或者value的值进行更改路由连接的值，那么如何给连接中带上参数呢，这就需要在router的连接中带上我们自己的参数值。

如下面的路由连接是这样书写的。

import ShowBlogs from './components/ShowBlogs'
import AddBlog from './components/AddBlog'
import SingleBlog from './components/SingleBlog'

export default [
  {path: '/',component: ShowBlogs},
  {path: '/add',component: AddBlog},
  {path: '/blog/:id',component: SingleBlog}
]

 

 

看上面代码中，最下面的一条路由，是根据后面的id进行连接的跳转。

/blog/:id，参数前面要加上冒号。

<div class="single-blog" v-for="blog in filteredBlogs">
  <router-link :to="/blog/+blog.id">
    <h2 v-rainbow >{{blog.title | to-uppercase}}</h2>
  </router-link>
  <article>{{blog.body | snippet}}</article>
</div>

在router-link中的to参数值书写为/blog/+blog.id，拼接我们的参数值，那么在跳转的时候就会带上参数进行请求接口传递id值。

<script>
    export default {
      name: "single-blog",
      data(){
          return{
            id: this.$route.params.id,
            blog: {

            }
          }
      },
      created(){
          this.$http.get("http://jsonplaceholder.typicode.com/posts/"+this.id).then(function (data) {
          console.log(data);
          this.blog = data.body;
        })
      }
    }
</script>

 

上面是SingleBlog.vue接收参数的方式，在data中id为this.$route.params.id将接收到的id传递给现在的组件中，那么通过created属性调用我们的后台接口的地址，拼接this.id就可以获取到接口的数据。

如果上面文章对你有用，打赏下我吧@*@