vue 多组件路由处理方法
2024-10-08 10:17:36
实现页面：
实现效果：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<style type="text/css">
#app{width: 800px;margin: 0 auto;}
#banner{text-align: right;line-height: 40px;background-color: royalblue;color: #fff;padding: 0 10px;}
#container{display: flex;text-align: center;height: 500px;}
.index{flex: 10;background-color: lightblue;}
.article{flex:7;background-color: lightblue;}
.attention{flex:7;background-color: lightblue;}
.hot{flex:3;background-color: lightpink;}
</style>
</head>
<body>
<div id="app">
<div id="banner">
<router-link to="/index" tag="span">首页</router-link>
<router-link to="/article" tag="span">我的文章</router-link>
<router-link to="/attention" tag="span">我的关注</router-link>
</div>
<div id="container">
<router-view></router-view>
<router-view name="article"></router-view>
<router-view name="attention"></router-view>
<router-view name="hot"></router-view>
</div>
</div> <template id="index">
<div class="index">主体页面</div>
</template>
<template id="article">
<div class="article">文章列表页面</div>
</template>
<template id="attention">
<div class="attention">我的关注页面</div>
</template>
<template id="hot">
<div class="hot">热门文章推荐</div>
</template>
<script type="text/javascript">
var indexTemp = {template:"#index"}
var articleTemp = {template:"#article"}
var attentionTemp = {template:"#attention"}
var hotTemp = {template:"#hot"} Vue.component('index',indexTemp)
Vue.component('article',articleTemp)
Vue.component('attention',attentionTemp)
Vue.component('hot',hotTemp) var routerRules = new VueRouter({
routes:[
{path:'/index',component:indexTemp},
{
path:'/article',
components:{article:articleTemp,hot:hotTemp}
},
{
path:'/attention',
components:{attention:attentionTemp,hot:hotTemp}
},
]
})
var vm = new Vue({
el:"#app",
router:routerRules
})
</script>
</body>
</html>
最新文章
- iOS 导入第三方文件夹时右侧出现问号
- 号外号外：9月21号关于Speed-BI 《全国人口统计数据分析》开讲了
- Android 建造者(Builder)模式
- 用Python制作游戏外挂（上）
- iptables-过滤61开头的ip数据包
- FZU 2087 统计树边
- Spring+SpringMVC+MyBatis深入学习及搭建(三)——MyBatis全局配置文件解析
- iOS 应用开发，用户密码存储技术－－KeyChain
- [luogu1168]中位数_优先队列
- C++——虚函数问题小集
- 5.list集合添加姓名{张三,李四,王五,二丫,钱六,孙七},将二丫替换为王小丫, 写入到"D:\\stuinfo.txt"
- 批量备份数据库脚本(PowerShell版)
- chrome浏览器添加vue-devtools扩展
- 文本分类学习 （八）SVM 入门之线性分类器
- Discrete Log Algorithms ：Baby-step giant-step 【二】
- JavaScript基础-DAY2
- mysql 报错 ‘u'Subquery returns more than 1 row'’
- hdu 1233 还是畅通project
- GPU bubbles
- access与excel