Vue HTML路由(每个内容都拆分版)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><!-- 别忘
·
<!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里配置 -->
<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>
<!-- 自定义组件模板 -->
<template id="home">
<div>
<ul>
<li>首页的1</li>
<li>首页的2</li>
</ul>
</div>
</template>
<template id="new">
<div>新闻页</div>
</template>
<template id="hot">
<div>热点页</div>
</template>
<script>
//总思想：把各个组件都拆分开来 顺序是:自定义组件模板template(定义模板内容)→routes(绑定地址)→
//VueRouter(绑定routes属性)→最后到Vue(绑定VueRouter)
//先绑定template组件模板,用Vue.extend方法
var Home=Vue.extend({template:"#home"});
var New=Vue.extend({template:"#new"});
var Hot=Vue.extend({template:"#hot"});
//再把VueRouteer内的routes给绑定赋值(把地址和组件模板绑定起来)
var routes=[
{
path:"/home",
component:Home
},
{
path:"/new",
component:New
},
{
path:"/hot",
component:Hot
}
];
//把VueRouter绑定routes属性，一层连一层
var router=new VueRouter({
routes:routes /*这里可以简写成routes。*/
});
var vm=new Vue({
el:"#box",
router:router /*这里也可以简写成router*/
});
</script>
</body>
</html>
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献3条内容
所有评论(0)