2018-09-25 路由

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

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

推荐阅读更多精彩内容