vue2.0路由实现底部导航跳转

最新推荐文章于 2024-12-25 18:30:30 发布

原创最新推荐文章于 2024-12-25 18:30:30 发布 · 3.7k 阅读

1 ·

CC 4.0 BY-SA版权

vue2.0 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个使用Vue.js和Vue Router实现的基本应用案例，通过四个不同的界面展示如何进行页面间的导航和内容切换。文章展示了如何定义组件、设置路由及其实现底部导航栏的功能。

<!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>