<!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>
vue组件路由实例(二)
最新推荐文章于 2024-09-03 08:45:00 发布