vue中的router-view
阿新 • • 發佈:2018-07-02
初始化 容器 get 適合 extend code com IE 路徑
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
組件替換了。
vue中的router-view