vue组件路由实例（二）

最新推荐文章于 2024-07-16 07:17:34 发布

原创最新推荐文章于 2024-07-16 07:17:34 发布 · 271 阅读

CC 4.0 BY-SA版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>aaa</title>
    <style>
    .active{
        color:red;
    }
    </style>
</head>
<body>
<div id="app">
    <router-link to="/"  >首页</router-link>
    <router-link to="/news" >新闻</router-link>
    <hr>
    <!--作用类似于占位符-->
    <router-view></router-view>
</div>

<template id="news">
    <div>
        <h1>新闻</h1>
        <router-link to="news/hotNews">热点新闻</router-link>
        <router-link to="/nowNews">实时新闻</router-link>
        <hr>
        <router-view></router-view>
    </div>
</template>


<template id="home">
    <div>
        <h1>首页</h1>
    </div>
</template>


<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js"></script>
<script type="text/javascript">
  /*  Vue.component("news",{
        template:"#news"

    });
    Vue.component("home",{
        template:"#home"
    });*/
    //用定义变量的方式定义组件的配置项
    var Home = {
        name:"home",
        template:"#home"
    };
    var News = {
        name:"news",
        template:"#news"
    };
    var HotNews ={
        name:"hotnews",
        template:"<div><h1>热点新闻</h1></div>"
    }
  var NowNews ={
      name:"hotnews",
      template:"<div><h1>今日新闻</h1></div>"
  }

    //定义路由关系对象（将配置项与路径进行关联）
    const routes =[
        {path:"/",component:Home},
        {path:"/news",component:News,
        children:[
            {path:"hotNews",component:HotNews},
            {path:"/nowNews",component:NowNews}
        ]},

    ];
    //传入配置项，实例路由和组件（将关联后的参数导入到路由实例中）
    const router = new VueRouter({
        //routes:routes
        routes,
       /* linkActiveClass:"active",*/
    });
    //在容器中注入路由 注册路由 （由路由实例注册到vue实例中）
    new Vue({
        el:'#app',
        //router:router
        router
    });
</script>
</body>
</html>