路由

作者: 天赐很棒 | 来源:发表于2018-09-25 14:52 被阅读0次

   <!DOCTYPE html>
    <html lang="en">
       <head>
           <meta charset="UTF-8">
           <title>Document</title>
            </head>
   <body>
              <a href=""></a>
            <div id='app'>
              <!--1.-->
               <router-link to='/index'>首页</router-link>
                <router-link to='/detail'>详情页</router-link>
                     <!--盛放导航对应的内容-->
                     <router-view></router-view>
            </div>
<script src='js/vue.js'></script>
<script src='js/vue-router.js'></script>
<script>
     //2. 创建组件
         var Index={
        template:`
           <h1>这是首页</h1>
         `
    }
    
    var Detail={
        template:`
          <h1>我是详情页</h1>
         `
    }
    
    //3.配置路由
    
    const routes=[
        {path:'/index',component:Index},
        {path:'/detail',component:Detail}
    ]
    
    //4.创建一个路由实例
    const router=new VueRouter({
        routes:routes
    })
    //5.把路由实例挂在到vue实例上 
   new Vue({
       el:'#app',
       router:router
   })
</script>
</body>
 </html>

无标题.png