概念
- 前端路由:
现代前端开发中最流行的页面模型,莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面,通过动态替换DOM内容并同步修改url地址,来模拟多页应用的效果,切换页面的功能直接由前台脚本来完成,而不是由后端渲染完毕后前端只负责显示。
- 后端路由
后端路由又可称之为服务器端路由,因为对于服务器来说,当接收到客户端发来的HTTP请求,就会根据所请求的相应URL,来找到相应的映射函数,然后执行该函数,并将函数的返回值发送给客户端。
实现登录功能切换
效果图
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/3c659ed9ca9b4a85fcf18d049d349873.png)
- 引入和创建路由
<!-- 引入路由 -->
<script src="./js/vue-router.js"></script>
------------------------------------------------------------------------------
//创建一个路由对象,当导入Vue-router包之后,在window全局对象中就有了一个路由的构建函数
//在new 路由对象的时候,可以位构造函数,传递一个配置对象
var rterObj= new VueRouter({
//route 这个配置对象中的route表示【路由配置规则】的意思
routes:[//路由配置规则
//每个路由规则,都是一个对象,这个规则对像有来个必须的属性:
//1.path表示监听哪个 路由地址
//2.是component,表示如果路由时前面匹配到的path,则展示component 属性对应的哪个组件
//component必须是一个组件模板对象不能是一个名称
{path: '/',redirect: '/login'},//这里的redirect,用来这个默认展示组件
{path:'/login',component: login},
{path:'/regester',component: regester}
]
})
- 把路由加到vue中
new Vue({
el:'#app',
methods: {
},
router: rterObj//将路由规则对象,注册到vm中,用来监听URL地址的变化,然后展示对应的组件
})
</script>
- 展示
<div id="app">
<!--router-link 默认渲染a标签,to接地址 tag=“” 可以改变标签,不过也有跳转-->
<router-link to="/login">登录</router-link>
<router-link to="/regester">注册</router-link>
<!-- vue-router提供的元素,专门用来当占位符的,将来,路由规则匹配搭配的组件,就会展示到这里 -->
<!--transition动画标签 -->
<transition mode="out-in">
<router-view></router-view>
</transition>
</div>
- 设置动画样式
<!-- 位router-link设置样式 -->
<style>
.router-link-active{
color: blue;
font-weight: 100;
font-style: italic;
font-size: 80px;
text-decoration: underline;
background-color: bisque
}
.v-enter,.v-leave-to{
opacity: 0;
transform: translateX(80px)
}
.v-enter-active,.v-leave-active{
transition: all 0.5s ease
}
</style>