<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>路由案例5</title>
<!-- 导入vue和vue-router -->
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<!-- css样式 -->
<style>
ul,
li,
h1 {
padding: 0;
margin: 0;
list-style: none
}
#app {
width: 100%;
display: flex;
flex-direction: row;
}
ul {
width: 200px;
flex-direction: column;
color: #fff;
}
li {
flex: 1;
background: #000;
margin: 5px auto;
text-align: center;
line-height: 30px;
}
.about-detail {
flex: 1;
margin-left: 30px;
}
.about-detail h1 {
font-size: 24px;
color: blue;
}
</style>
</head>
<body>
<div id="app">
<!-- 定义路由超链接 -->
<!-- to指定的是我们前端路由的路径 -->
<ul>
<router-link to="/about" tag="li">关于公司</router-link>
<router-link to="/contact" tag="li">联系我们</router-link>
</ul>
<!-- 给父路由组件提供插入的位置 -->
<router-view></router-view>
</div>
<!-- 关于我们界面 -->
<template id="about-tmp">
<div class="about-detail">
<h1>北京xx科技有限公司简介</h1>
<router-link to="/about/detail">公司简介</router-link> |
<router-link to="/about/governance">公司治理</router-link>
<router-view></router-view>
<!--给子路由组件提供插入位置-->
</div>
</template>
<!-- 联系我们 -->
<template id="contact-tmp">
<div class="about-detail">
<h1>联系我们</h1>
<p>公司位于北京市海淀区中关村科技园内，主营业务包括餐饮娱乐、服装设计等
</p>
</div>
</template>
</body>
<!-- 创建组件 -->
<script>
// 创建路由的组件
var about = { template: '#about-tmp' }
var contact = { template: '#contact-tmp' }
// 创建子路由的组件
var detail = { template: '<p>xx是全球领先... ...</p>' }
var governance = {
template: '<p>公司坚持以客户为中心、以奋斗者为本... ...</p>'
}
// 创建路由
var router = new VueRouter({
routes: [
{ path: '/', redirect: '/about' }, // 路由重定向
{
path: '/about', component: about,
// 定义子路由
children: [
{ path: 'detail', component: detail },
{ path: 'governance', component: governance }
]
},
{ path: '/contact', component: contact }
]
})
// 创建vue实例对象
const vm = new Vue({
// 设置挂载点
el: "#app",
// 将路由规则绑定到当前的vm实例上去
router: router
})
</script>
</html>
搭配Vue路由(上)和Vue路由(下)博客学习
需积分: 6 124 浏览量
2022-10-21
11:20:21
上传
评论
收藏 117KB ZIP 举报
vue-router案例代码（全）.zip （13个子文件） 
test2.html 1KB test7.html 1KB test6.html 1KB
vue.js 333KB test4.html 2KB test8.html 1KB test9.html 1KB test5回顾.html 3KB test3.html 1KB test10.html 1KB test5.html 4KB vue-router.js 70KB test1.html 2KB
评论0