2018-09-25 路由

2018-09-25  本文已影响0人  月薪2k的前端程序员

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
   })
上一篇下一篇

猜你喜欢

热点阅读