vue里面的router-view标签是什么意思
发布于 3年前 作者 maxiong_ 16199 次浏览 来自 问答
粉丝福利 : 关注VUE中文社区公众号,回复视频领取粉丝福利

看了一下文档

<router-view> 组件是一个 functional 组件,渲染路径匹配到的视图组件。<router-view> 渲染的组件还可以内嵌自己的 <router-view>,根据嵌套路径,渲染嵌套组件。

不太懂。他跟组件、视图关系。请大神说一下

4 回复

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

组件的嵌套,一样的逻辑,看下文档和demo吧。 嵌套路由

回到顶部