Question

尝试从一个组件重定向到另一个组件时遇到问题。看来它没有路由到路由器中指定的URL所需组件，而是停留在我的主页上。我不知道错误出在哪里。

我正在使用Vue CLI版本3。
以下是我的index.js，Home.vue和Model.vue

然后在其下是Home.vue的图像，然后显示了当我尝试重定向到href标签中的链接时发生的情况。
您会看到它并没有转到其他组件，而是停留在我的主页上。

有关导致此问题的原因的任何想法？谢谢！

/router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import Homefrom '@/components/Home'
import Model from '@/components/Model'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/model/:model_tag_name',
      name: 'Model',
      component: Model
      // props: true 
    }
  ]
})

/components/Home.vue

<template>
  <div class="hello container-fluid">
    <h1>{{msg}}</h1>
    <div class="row">
      <div class="col-4 text-left">
        <ol>
          <li v-for="tag in tags" v-bind:key="tag.model_tag_name">
            <a :href="'/model/'+ tag.model_tag_name"> {{tag.model_tag_name}}</a>
          </li>
        </ol>
      </div>
      <div class="col-8">
        <p>Data</p>
      </div>
    </div>
  </div>

</template>

<script>
var axios = require('axios');

export default {
  name: 'Home',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      tags: []
    }
  },
  mounted: function() {
    var url = 'http://10.0.0.5:5000';
    console.log(url)
    axios.get(url + '/')
      .then((response) => {
        console.log(response.data);
        this.tags = [{"model_tag_name": response.data}];
      })
      .catch(function(error) {
        console.log(error);
      });
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

a {
  color: #42b983;
}
</style>

/components/Model.vue

<template>
  <div class="container-fluid">
    <h1> Model </h1>
  </div>

</template>

<script>
var axios = require('axios');

export default {
  name: 'Model',
  data () {
    return {
      model_tag_name: this.$route.params.model_tag_name
    }
  }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

a {
  color: #42b983;
}
</style>

http://localhost:8080/

然后，这就是我单击主页上的href链接时发生的情况。即使URL与Model.vue的routerview匹配，它也会重定向回到主页。

Answer 1

请在/components/Home.vue中更新此代码

   <li v-for="tag in tags" v-bind:key="tag.model_tag_name">
<router-link :to="{ name: 'Model', params: { model_tag_name: tag.model_tag_name}}"> 
 {{tag.model_tag_name}}</router-link>
   </li>

Vue / Vuecli3-如何使用参数从一个组件路由到另一个组件

1 个答案: