2018-09-25路由第一课

作者: 其实_dnhl | 来源:发表于2018-09-25 19:22 被阅读5次

<style>
    a{
        text-decoration: none;
    }
    .router-link-active{
        color: #ff1db5;
    }
    .adsd{

    }
</style>
<body>
<div id="app">
    <!--1.-->
    <router-link to="/home">首页</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 Home ={
      template:`
      <h1>这是首页</h1>
      `
    };
    var Detail ={
        template:`
      <h1>这是详情页</h1>
      `
    };
    //3.配置路由
    const routes=[
        {path:"/",component:Home},
        {path:"/home",component:Home},
        {path:"/detail",component:Detail}
    ];
    //4.创建一个路由实例
    const route=new VueRouter({
        routes:routes,
        linkActiveClass:"adsd"
    });
    //5.把路由实例挂在到vue实例上
    new Vue({
       el:"#app",
        router:route
    });
</script>