vue2.0路由实现底部导航跳转
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px';// 1REM=50px *{margin: 0 ;padding: 0 ;}ul,p,span,ol,h1,h2,h3,h4,h5,h6{margin:
·
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px';
// 1REM=50px
</script>
<style>
*{
margin: 0 ;padding: 0 ;
}
ul,p,span,ol,h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
list-style:none;
}
a{
text-decoration: none;
}
body{
font-family: "微软雅黑" !important;
background: #FFF !important;
verflow:-Scroll;overflow-x:hidden
}
.content{
width: 100%;
overflow: hidden;
min-height: 100vh;
background: red;
}
.nav{
width: 100%;
height: 1rem;
background: yellow;
z-index: 999;
position: fixed;
bottom: 0;
}
.nav a{
width: 25%;
height: 100%;
display: block;
float: left;
text-align: center;
line-height: 1rem;
font-size: 0.4rem;
}
.nav a+a:before{
padding: 8px;
color: blue;
content: '/\00a0';
}
</style>
</head>
<body>
<div id="app">
<div class="content">
<router-view></router-view>
</div>
<div class="nav">
<router-link to="/one">One</router-link>
<router-link to="/two">Two</router-link>
<router-link to="/three">Three</router-link>
<router-link to="/four">Four</router-link>
</div>
</div>
</body>
</html>
<script>
//定义路由对应的组件。
let OneComponent={
template:`<div>
这里是界面一
</div>`
}
let TwoComponent={
template:`<div>
这里是界面二
</div>`
}
let ThreeComponent={
template:`<div>
这里是界面三
</div>`
}
let FourComponent={
template:`<div>
这里是界面四
</div>`
}
//创建router实例，并定义导航和组件的映射关系
let router = new VueRouter({
//配置routes
routes:[
//定义3个导航和组件的映射关系
{
path:"*",
component:OneComponent
},
{
path:"/two",
component:TwoComponent
},
{
path:"/three",
component:ThreeComponent
},
{
path:"/four",
component:FourComponent
}
]
});
//创建vue实例，注入路由router
let app = new Vue({
el:"#app",
router, //此处是ES6语法，
//相当于router:router
});
</script>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
<script type="text/javascript">
document.documentElement.style.fontSize = document.documentElement.clientWidth / 750*100 + 'px';
// 1REM=50px
</script>
<style>
*{
margin: 0 ;padding: 0 ;
}
ul,p,span,ol,h1,h2,h3,h4,h5,h6{
margin:0;
padding:0;
list-style:none;
}
a{
text-decoration: none;
}
body{
font-family: "微软雅黑" !important;
background: #FFF !important;
verflow:-Scroll;overflow-x:hidden
}
.content{
width: 100%;
overflow: hidden;
min-height: 100vh;
background: red;
}
.nav{
width: 100%;
height: 1rem;
background: yellow;
z-index: 999;
position: fixed;
bottom: 0;
}
.nav a{
width: 25%;
height: 100%;
display: block;
float: left;
text-align: center;
line-height: 1rem;
font-size: 0.4rem;
}
.nav a+a:before{
padding: 8px;
color: blue;
content: '/\00a0';
}
</style>
</head>
<body>
<div id="app">
<div class="content">
<router-view></router-view>
</div>
<div class="nav">
<router-link to="/one">One</router-link>
<router-link to="/two">Two</router-link>
<router-link to="/three">Three</router-link>
<router-link to="/four">Four</router-link>
</div>
</div>
</body>
</html>
<script>
//定义路由对应的组件。
let OneComponent={
template:`<div>
这里是界面一
</div>`
}
let TwoComponent={
template:`<div>
这里是界面二
</div>`
}
let ThreeComponent={
template:`<div>
这里是界面三
</div>`
}
let FourComponent={
template:`<div>
这里是界面四
</div>`
}
//创建router实例，并定义导航和组件的映射关系
let router = new VueRouter({
//配置routes
routes:[
//定义3个导航和组件的映射关系
{
path:"*",
component:OneComponent
},
{
path:"/two",
component:TwoComponent
},
{
path:"/three",
component:ThreeComponent
},
{
path:"/four",
component:FourComponent
}
]
});
//创建vue实例，注入路由router
let app = new Vue({
el:"#app",
router, //此处是ES6语法，
//相当于router:router
});
</script>
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)