The business scenario is like this. I query a list and display it on the page. When I click a message, I can jump to its corresponding top. The list page is displayed as follows:

When I select a message, he will jump to the corresponding single list detail page for me. The screenshot of the page is as follows:

You can see that the jump path is: http://localhost:8080/blog/1，

If you want to automatically bring the id of each title when jumping, you need to control the route. First, in main Add routing support in JS. The specific code is as follows:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import VueResource from 'vue-resource'
//Import route
import VueRouter from 'vue-router'
import Routes from './routes'

Vue.config.productionTip = false

Vue.use(VueResource)
Vue.use(VueRouter)

// Custom instruction
// Vue.directive('rainbow',{
//    bind(el,bing,vnode){
//     //Color random generation
//      el.style.color ="#"+Math.random().toString(16).slice(2,8);
//    }
// })

Vue.directive('theme',{
   bind(el,binding,vnode){
      if(binding.value == 'wide'){
         el.style.maxWidth = "1260px";
      } else if (binding.value == 'narrow'){
        el.style.maxWidth = "560px";
      }

      if (binding.arg == 'column'){
        el.style.background = "#6677cc";
        el.style.padding = '20px';
      }
   }
})

// Custom filter
// Vue.filter("to-uppercase",function(value){
//     return value.toUpperCase();
// })

Vue.filter("snippet",function(value){
    return value.slice(0,100)+"...";
})

//Create route
const router = new VueRouter({
    routes:Routes,
    mode:"history"
})

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  router:router
})

2. Create routes under src JS, add the link to jump to each page, and the code is as follows:

Here we mainly talk about the configuration of a single jump link. As shown in the screenshot above, it needs to be configured as follows: {path:"/blog/:id",component:SingleBlog}. Then the problem comes. You jump from the previous page to the next page,

How do I bring the id to a single detail page?

3. Configure the jump mode on the list page, and the code is as follows:

<template>
  <div v-theme:column="'narrow'" id="show-blogs">
      <h1>Blog overview</h1>
      <input type="text" v-model="search" placeholder="search">
      <div v-for="blog in filteredBlogs" class="single-blog">
          <router-link  v-bind:to="'/blog/' + blog.id">
          <h2 v-rainbow>{{blog.title | to-uppercase}}</h2>
          </router-link>
          <article>
              {{blog.body | snippet}}
          </article>
      </div>
  </div>
</template>

<script>
export default {
  name: 'show-blogs',
  data(){
      return {
          blogs:[],
          search:""
      }
  },
  created(){
      this.$http.get("https://jsonplaceholder.typicode.com/posts")
      .then(function(data){
          //Here, go to get 10 pieces of information and write the event when the initialization is completed by using created here. For example, if the loading event is ended here, the asynchronous request is also suitable to be called here;
          this.blogs = data.body.slice(0,10);
      })
  },
  computed:{
      filteredBlogs:function(){
          return this.blogs.filter((blog) =>{
              return blog.title.match(this.search);
          })
      }
  },
  filters:{
    //   "to-uppercase":function(value){
    //       return value.toUpperCase();
    //   }
       toUppercase(value){
          return value.toUpperCase();
      }
  },
  directives:{
      'rainbow':{
          bind(el,binding,vnode){
              el.style.color = "#" + Math.random().toString(16).slice(2,8);
          }
      }
  }
}
</script>

<style>
#show-blogs{
    max-width: 800px;
    margin: 0 auto;
}

.single-blog{
    padding: 20px;
    margin: 20px 0;
    box-sizing: border-box;
    background: #eee;
    border: 1px dotted #aaa;
}

#show-blogs a{
    color: #444;
    text-decoration: none;
}

input[type="text"]{
    padding: 8px;
    width: 100%;
    box-sizing: border-box;
}
</style>

I don't know if you can understand the above code. Let me briefly explain its implementation logic. First, when the page is loaded, I use the hook function created to get it

I need the data information, and fill the data I get into the blog. I use the v-for tag to cycle all the elements in it. In order to make it support the things in the search box,

I use the computed function to receive things in blogs. The reason for choosing the computed function here is that the computed attribute is cached. When the page value remains unchanged,

You only need to load it once, and then use the cache directly when you load it later. Then use the combination of filter and match to call in computed. After that, use v-bind:to="'/blog /' + blog.id"

To realize route jump in this way, special attention should be paid to the spelling of single quotation marks and double quotation marks when jumping in vue.

In order to facilitate your follow-up study, I will upload my code to my github later. You are welcome to download it at any time. Thank you!