vue 路由器链接未在刷新页面上显示参数

Question

when i refresh page, the component "music" see 'params' object empty, can someone help me ?

below the code:

route.js:
{
    path: "/music",
    name: "music",
    component: music
}

file that call router-link:
<router-link :to="{name:'music', params:{ title:'Musicc'}} ">Music</router-link>

music component:
<template>
  <div>
    <div>{{title}}</div>
  </div>
</template>
<script>
    export default {
    name: "music",
    computed:{
        title: function(){
            return this.$route.params.title;
        }
      }
    }
</script>

Answer 1

you have to give the param name in path of you route....perhaps it can be the answer

route.js:
{
    path: "/music/:title",
    name: "music",
    component: music
}

Answer 2

add props:true in route.js

route.js:

{
    path: "/music",
    name: "music",
    component: music,
    props: true
}

Answer 3

A page refresh is different than clicking on a router link. Parameters passed by clicking on a router-link do not persist in the page after a page refresh (as William Wang mentioned). If you need to persist data in spite of a page refresh, think about using Vuex state management instead of passing lots of parameters around.

Answer 4

Here is your problem

in the file that call the router-link

<router-link :to="{name:'music', params:{ title:'Musicc'}} ">Music</router-link>

while in

path: "/music"

it should be

path:"/music/:title"

so it a typo