亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

Vue/Vuecli3 - 如何使用參數從一個組件路由到另一個組件

Vue/Vuecli3 - 如何使用參數從一個組件路由到另一個組件

至尊寶的傳說 2022-01-13 15:22:00
嘗試從一個組件重定向到另一個組件時遇到問題。它似乎沒有路由到我的路由器中指定的 URL 到所需的組件,而是停留在我的主頁上。我無法弄清楚錯誤發生在哪里。我正在使用 Vue CLI 版本 3。下面是我的 index.js、Home.vue 和 Model.vue然后在那下面是 Home.vue 的圖像,然后它顯示了當我嘗試重定向到我的 href 標記中的鏈接時會發生什么。您可以看到它不會轉到其他組件,而是停留在我的主頁上。關于是什么導致這里問題的任何想法?謝謝!/router/index.jsimport 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>
查看完整描述

1 回答

?
largeQ

TA貢獻2039條經驗 獲得超8個贊

請在 /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>


查看完整回答
反對 回復 2022-01-13
  • 1 回答
  • 0 關注
  • 250 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號