Vue中如何通过vue-router实现命名视图-创新互联

这篇文章主要为大家展示了Vue中如何通过vue-router实现命名视图，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。

在孟津等地区，都构建了全面的区域性战略布局，加强发展的系统性、市场前瞻性、产品创新能力，以专注、极致的服务理念，为客户提供成都网站制作、做网站 网站设计制作按需求定制网站,公司网站建设,企业网站建设,品牌网站设计,全网整合营销推广,成都外贸网站建设,孟津网站建设费用合理。

在用vue-router路由处理一些需求的时候 例如 有时需要同时同级展示多个组件 而不是嵌套展示
例如：创建一个布局 有侧导航和主内容两个视图 此时命名视图就派上用场了

在路由对象中 使用components属性 以使一个路径下可挂载多个子组件：
之后即可为每个要展示的组件指定一个名字
默认name为default 即 不设置名字

<script>
 var header={
  template:"<h2>头部</h2>"
 }
 var leftBox={
  template:"<h2>左侧边栏</h2>"
 }
 var mainBox={
  template:"<h2>主体</h2>"
 }

 // 创建路由对象
 var router=new VueRouter({
  routes:[
   // 使用components属性 一个路径下挂载多个子组件
   {path:"/",components:{
    // 默认展示的组件
    "default":header,
    // 为组件命名
    "left":leftBox,
    "main":mainBox
   }}
  ]
 })

 var vm=new Vue({
  el:'#app',
  data:{},
  methods:{},
  // 挂载路由对象
  router
 });
</script>

新闻名称：Vue中如何通过vue-router实现命名视图-创新互联
本文来源：https://www.cdcxhl.com/article42/dhdohc.html

成都网站建设公司_创新互联，为您提供自适应网站、营销型网站建设、网站建设、网站排名、企业建站、软件开发

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联