（Vue.js）與不同路由相同的組件

我想在Vue.js應用程序中爲不同的路由使用相同的組件。（Vue.js）與不同路由相同的組件

我現在有這樣的事情：

main.js

const routes = [ 
    { path: '/route-1', name: 'route-1', component: MyComponent }, 
    { path: '/route-2', name: 'route-2', component: MyComponent }, 
    { path: '/route-3', name: 'route-3', component: MyComponent }, 

] 

const router = new VueRouter({ 
    routes 
})

myComponent.vue

<ul> 
    <li><router-link to="/route-1">Route 1</router-link></li> 
    <li><router-link to="/route-2">Route 2</router-link></li> 
    <li><router-link to="/route-3">Route 3</router-link></li> 
</ul>

當我在瀏覽器中手動鍵入路由時，一切正常，但是當我嘗試在路由之間使用其中一些router-generated-links導航時，沒有任何反應。路線改變但內容仍然相同。任何想法如何我可以解決這個問題？

謝謝！

來源

2017-03-05 Moisés Pio

那麼你使用相同的組件，所以這就是爲什麼沒有改變，實際上只有改變的是路線。 –

這是Vue試圖優化和重用現有組件的預期行爲。您想實現的行爲曾用名爲canReuse的設置解決，但已被棄用。目前建議的解決方案是設置一個唯一的:key財產上的<router-view>像這樣：

<router-view :key="$route.path"></router-view>

看看這個JSFiddle example。

來源

2017-03-05 16:30:18 mzgajner

工程就像一個魅力！我明白爲什麼這是預期行爲的原因，但由於我有三個類似的頁面，只是有一些內容差異，我不得不使用三條不同的路線爲每個頁面加載正確的內容。這是我的第一個項目，也許我會找到一個更優雅的解決方案來實現相同的結果。但是，謝謝！ :) –

（Vue.js）與不同路由相同的組件

回答

相關問題