如何在 Vue 中更改 url？

Question

How do we make a change url in the Vue?

If I logout now and login with a different ID, the page remains unchanged. because the URL has not changed.

the url format is base/UserRecommend/{user_id}

I'm trying to switch pages using userid. The userid has been properly changed, but the url has not changed at all.

App.vue

<div id="nav">
    <router-link v-if="isLogin" :to="{ name:'UserRecommend',params:{userid:this.userid}}">UserRecommend</router-link>
</div>

<script>
import jwt_decode from "jwt-decode"
export default {
  name: 'App',
  data: function () {
    return {
      isLogin: false,
    }
  },
  methods: {
    logout () {
      this.isLogin = false
      localStorage.removeItem('jwt')
      localStorage.removeItem('username')
      this.$router.push({ name:'Home' })
    },
  },
  created: function () {
    if (localStorage.getItem('jwt')) {
      const token = localStorage.getItem('jwt')
      this.userid= jwt_decode(token).user_id
      this.isLogin = true
      this.username = localStorage.getItem('username')
      this.$router.push({ name:'Home' })
    }
  }
}
</script>

Here, take the parameter value with routerlink and move the page. However, if I press link UserRecommend , the url is expected to change, but it remains as the previous url and page

If I refresh the page, the url is changed.

UserRecommend.vue

<template>
  <div>
    <h1>"{{this.$route.params.userid}}"</h1>
    <ul class="row">
      <MovieItem v-for="movie in movieList" :key="movie.id" :movie="movie" @click="getMovieDetail(movie.id)"/>
    </ul>
  </div>
</template>

<script>
import jwt_decode from "jwt-decode"
import axios from 'axios'
import MovieItem from '@/components/MovieItem'
export default {
  name:'UserRecommend',
  data(){
    return {
      movieList:[],
    }
  },
  components:{
    MovieItem,
  },
  created(){
    const token = localStorage.getItem('jwt')
    this.userid= jwt_decode(token).user_id
    console.log(this.userid)
    console.log(token)
    axios({
      url:'http://127.0.0.1:8000/memovies/movies/'+this.userid+'/recommend/',
      method:'get',
      headers:{
          Authorization: `JWT ${localStorage.getItem('jwt')}`
      },
    })
      .then(res=>{
        console.log(this.userid)
        this.movieList = res.data
        console.log(res.data)
        console.log(this.userid)
      })
      .catch(err=>{
        console.log(this.$route.params.userid)
        console.log(err)
      })
  },
}
</script>

<style>

</style>

router

  {
    path:'/memovies/UserRecommend/:userid',
    name:'UserRecommend',
    component: UserRecommend,
  },

How do I change the url when I press 'UserRecommend' on the main page?

Additionally, what is missing about my process in the vue?

Answer 1

Ummm, I suggest that you should replace the following lines:

    <h1>"{{this.$route.params.userid}}"</h1>

with:

    <h1>"{{$route.params.userid}}"</h1>

because... wait, it's another problem. Let's focus on how to change the url. How about changing this:

    <router-link v-if="isLogin" :to="{ name:'UserRecommend',params:{userid:this.userid}}">UserRecommend</router-link>

to this:

    <router-link v-if="isLogin" :to="{ name:'UserRecommend',params:{userid}}">UserRecommend</router-link>