<!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>
06-20
2534
2534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
