vue中的router-view

Vue適合單頁面應用，當你須要多個頁面的時候，傳統的web是經過轉跳連接的方式實現的，而Vue能夠經過路由的方式實現頁面的專挑 demo： 圖片組件： <template> <img src="…/example/img.png/> </template> 組件1 <template> //點擊a標籤實現路由的轉跳 <a @click="showImg"> <router-link></router-link> </template>

<script> methods:{ showImg:function(){ //下面的字符串爲路由文件定義的路徑 this.$router.push("/img") } } </script>

主要是構建 SPA (單頁應用) 時，方便渲染你指定路由對應的組件。你能夠 router-view 當作是一個容器，它渲染的組件是你使用 vue-router 指定的。好比：

視圖層：

<div id="app"> <router-view></router-view> </div>

路由定義：

router.map({ '/foo': { // 路由匹配到/foo時，會渲染一個Foo組件 component: Foo } })

初始化實例:

// start app var App = Vue.extend({}) router.start(App, '#app')

當你訪問 /foo 時，router-view 就被 Foo 組件替換了。