路由(基础)

作者: yangmengjiao | 来源:发表于2018-09-24 10:43 被阅读0次


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <div id='app'>
       <!--//1.-->
       <router-link to='/home'>首页</router-link>
       <router-link to='/detail'>详情页</router-link>
       <!-- 盛放每个页面对应的内容-->
       <router-view></router-view>
   </div>
    <script src='../vue(01)/js/vue.js'></script>
    <script src='../vue(01)/js/vue-router.js'></script>
    <script>
        //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
        })
        
        //把路由挂在到vue实例上
       new Vue({
           el:'#app',
           router:router
       })
    </script>
</body>
</html>