###(Vue-Router)
vue-cli 单文件组件 .vue就是一个组件
SPA(单页面应用程序) Single Page Application
单页面应用程序:
原理:
只有入口的html文件,根据hash(哈希)值的不同显示不同的页面(组件),
局部更新视图,不用刷新整个页面
Vue-Route库(配合vuejs使用的第三方插件/库)
用来处理vuejs中的路由
路由:根据不同的路径(url地址)显示不同的页面
前端路由:根据hash(锚点)的不同显示不同的页面(组件)
后台路由:根据客户端的不同的请求路径,响应不同的东西(接口或静态资源)
使用:
<div id='#app'>
<router-link to="/xxx">goto xxx</router-link>
<router-link to="/yyy">goto yyy</router-link>
<div>
将匹配到的路由规则的组件显示在这里
<router-view></router-view>
</div>
</div>
1.先引用 vue-router.js库
2.定义并配置
const router=new VueRouter({
routes:[
{
path:'/xxx',
component:{
template:'<div>xxx组件</div>'
}
},
{
path:'/yyy',
component:{
template:'<div>yyy组件</div>'
}
}
]
})
3.配置
4.挂载vue实例根实例上
new Vue({
el:"#app",
router
})
动画
内部原理:借助css3做动画
transiton 过渡动画
animation 帧动画
使用:
让谁动画就用<transiton name="slide">
<div></div>
</transiton>包裹
.slide-enter,.slide-leave-to{
动画进入的初始样式
动画离开的结束样式
}
.slide-enter-active,.slide-leave-active{
过程中 做transition过渡
transiton:all 5s ease;
}
.slide-enter-to,.slide-leave{
动画进入结束
动画离开的初始状态
}
动画使用的条件:
v-if
v-show
v-for
路由
路由的传参
#/aaa/:xxx parmas
$route.parmas.xxx
#/aaa?xxx=1&b=2 query(GET方式传参)
$route.query
路由的嵌套
一个大组件中包含很多个小组件
<router-view>
<router-view></router-view>
</router-view>
命名路由
有名字的路由就叫命名路由
就是在每条路由规则里面添加name属性 取个名字
js操作路由
$router.push()
$router.go()
$router.back()
$router.forward()
多视图
router 路由
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
*{
margin: 0;padding: 0;
list-style: none;
text-decoration: none;
}
.content{
position: absolute;
left:0;
top:0;
right:0;
}
.tabbar{
position: absolute;
bottom:0;
left:0;
right:0;
height:44px;
line-height: 44px;
}
.tabbar ul{
display: flex;
}
.tabbar ul li{
flex: 1;
background: #0ff;
text-align: center;
}
.slide-to-enter,.slide-to-leave-to{
/* 1vw===设备宽的百分之一 */
transform: translate(100vw);
opacity: 0;
}
.slide-to-enter-active,slide-to-leave-active{
transition: all 0.5s ease-out;
}
.slide-to-enter-to,.slide-to-leave{
transform:translate(0);
opacity: 1;
}
</style>
</head>
<body>
<div id="app">
<div class="content">
<!-- 匹配到的组件展示在这里 -->
<transition name="slide-to">
<router-view></router-view>
</transition>
</div>
<div class="tabbar">
<ul>
<li><router-link to='/home'>微信</router-link></li>
<li><router-link to='/details'>通信录</router-link></li>
<li><router-link to='/shop'>发现</router-link></li>
<li><router-link to='/my'>我</router-link></li>
</ul>
</div>
</div>
<script src="vue.js"></script>
<script src="vue-router.js"></script>
<script>
const router=new VueRouter({
routes:[
{
path:'/home',
component:{
template:'<div>微信页面</div>'
}
},
{
path:'/details',
component:{
template:'<div>通信录页面</div>'
}
},
{
path:'/shop',
component:{
template:'<div>发现页面</div>'
}
},
{
path:'/my',
component:{
template:'<div>我页面</div>'
}
},
]
})
new Vue({
el:'#app',
router
})
</script>
</body>
</html>
希望能帮助到你!
哪里有写的不好,不恰当的,记得留言,ok !
扫一扫
7887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
