美文网首页
2018-09-25 路由

2018-09-25 路由

作者: 月薪2k的前端程序员 | 来源:发表于2018-09-25 19:16 被阅读0次

    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
       })

    相关文章

      网友评论

          本文标题:2018-09-25 路由

          本文链接:https://www.haomeiwen.com/subject/iaoloftx.html