时间戳

首页 > 解决方案 > 如何更改 Vue 中的 url？

vue.js - 如何更改 Vue 中的 url？

问题描述

我们如何在 Vue 中更改 url？

如果我现在注销并使用不同的 ID 登录，则页面保持不变。因为 URL 没有改变。

网址格式是base/UserRecommend/{user_id}

我正在尝试使用用户 ID 切换页面。userid 已正确更改，但 url 根本没有更改。

应用程序.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>

在这里，用routerlink取参数值并移动页面。但是，如果我按 link UserRecommend，则 url 预计会改变，但它仍然是以前的 url 和页面

如果我刷新页面，则 url 会更改。

用户推荐.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>

路由器

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

在主页上按“UserRecommend”时如何更改网址？

此外，我在 vue 中的流程缺少什么？

标签： vue.js

解决方案

嗯，我建议你应该替换以下几行：

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

和：

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

因为……等等，这是另一个问题。让我们关注如何更改url。如何改变这个：

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

对此：

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

推荐阅读