<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 必须先导包 -->
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
</head>
<body>
<div id="box">
<ul>
<!-- 作用:点击不同li显示不同组件 -->
<!-- router-link to是下面routes配置的地址 -->
<li><router-link to="/home">首页</router-link></li>
<li><router-link to="/new">新闻</router-link></li>
<li><router-link to="/hot">热点</router-link></li>
</ul>
<!-- 把点击组件显示出来的元素router-view -->
<div><router-view></router-view></div>
</div>
<script type="text/javascript">
var vm=new Vue({
el:"#box",
/*顺序是:router对应一个新的VueRouter→VueRouter里有routes属性→routes把地址和组件模板对应起立*/
/*自定义路由VueRouter*/
router:new VueRouter({
//routes属性的作用是把地址和组件模板对应起来
routes:[
{
//地址名,router-link的地址
path:"/home",
//component就是组件模板
component:({template:"<h1>首页</h1>"})
},
{
path:"/new",component:({template:"<h1>新闻</h1>"})
},
{path:"/hot",component:({template:"<h1>热点</h1>"})
}
]
})
})
</script>
</body>
</html>Vue路由(写死template版)
猜你喜欢
转载自blog.csdn.net/chijiajing/article/details/82884439
今日推荐
周排行