2018-09-23路由 (vue-router.js)

Vue Router 是vue.js官方的路由管理器 第三方工具库=>vue-router.js
允许用过不同的url来访问不同的页面(页面之间的跳转)
spa(single page application)单页面应用

1.写好每个页面及页面盛放内容

     <router-link to='/home'>首页</router-link>
      <router-link to='/detail'>详情页</router-link>
      <!-- 盛放每个页面对应的内容-->
      <router-view></router-view>

2.创建组件

        var Home={
            template:`
                <h1>这是首页</h1>
            `
        }
        
        var Detail={
             template:`
                <h1>这是详情页</h1>
            `
        }

3.配置路由

        const routes=[
            {path:'/home',component:Home},
            {path:'/detail',component:Detail}
        ]

4.创建一个路由实例

        const router=new VueRouter({
            routes:routes
        })

5.把路由挂在到vue实例上

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

推荐阅读更多精彩内容

  • 阅读时间:2016.2.6 阅读页码:第一章 四(5页) 阅读心得:这部分主要描述了东二道街上的扎彩铺里的景象,从...
    迷路的小猪阅读 361评论 0 0
  • ”亚托克斯站在峡谷中,看着对面倒下的兰博和他的机器人,回想起了自己强大的痛苦和艰辛…… 他还隐隐约约的记得,他是如...
    RoseQueen_78dc阅读 193评论 0 0
  • 面向对象编程的2个非常重要的概念:类和对象 定义类的方法 创建对象 魔法方法 __init__()
    步_尘阅读 387评论 0 0
  • 今天早晨七点钟醒来,外面下着细雨,雨下的急下的密,直到八点半才渐渐缓下来,我推开窗户,呼吸到湿润的空气,同时也感到...
    安琪尔珂阅读 575评论 0 0
  • 如果爱情需要,我将毫不吝啬。
    沉在深海默阅读 129评论 0 0