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 组件替换了。