vue配置路由 2018-11-05

1.路由的路径有<router-link></router-link>标签配置    标签内to属性规定该标签回想的path路径

        <router-link to="/home">去首页</router-link>

        <router-link to=“/news”>去新闻</router-link>

        路由对应视图 通过加载组件 加载到<router-view></router-view>容器上

2.路由的配置:

1)定义组件--(试图加载的内容组件)

Eg:

var Home={template:'<div>这是一个首页的页面</div>'}

2)配置路由 定义路由

Path 属性 配置路由地址      “*”默认路径下    redirect 属性配置路由重定向 

component 属性 配置改地址需要加载的组件视图

Eg:

var  routes=[

        {path:'/home',component:Home},

        {path:'/news',component:News},

        { path: '*', redirect: '/news' }  /*路由的重定向*/

    ]

3)实例化VueRouter

    var  router=new VueRouter({  /*router 老老实实的写这个名字*/

        routes:routes  /*VueRouter里面的属性名称不能变  routes  */

    })

4)VueRouter挂载到Vue实例上面去

var app=new Vue({

        router:router,

        el:'#out'

    })

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,993评论 19 139
  • 1路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的abou...
    你好陌生人丶阅读 1,657评论 0 6
  • 相关概念 混合开发和前后端分离 混合开发(服务器端渲染) 前后端分离后端提供接口,前端开发界面效果(专注于用户的交...
    他爱在黑暗中漫游阅读 2,864评论 4 45
  • HTML部分 Hello App! <!-- 通过传入 `to` 属性指定链接. --> <!-- <rout...
    另一个童话阅读 316评论 0 0
  • vue是什么? vue是构建数据驱动的web界面的渐进式框架。Vue.js 的目标是通过尽可能简单的 API 实现...
    九四年的风阅读 8,746评论 2 131