vue路由及案例

最新推荐文章于 2024-05-21 19:34:20 发布

一只前端蜗牛

最新推荐文章于 2024-05-21 19:34:20 发布

阅读量385

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/yingzi_0322/article/details/105820677

版权

本文探讨了前端路由与后端路由的区别，并详细介绍了Vue路由的基础使用，包括如何创建路由、传递参数以及为路由切换添加动画效果。通过示例代码，展示了在Vue项目中如何设置和操作路由。

摘要由CSDN通过智能技术生成

前端路由和后端路由的区别：

后端路由：对应相应服务器的资源的url就叫后端路由，这种路由请求会调用服务器资源
前端路由：只在浏览器跳转，不涉及服务器请求。通过hash（#）来实现的。http请求中不会包含hash相关的内容。

路由的基本使用

导入vue-router.js
建组件模板（ template里只能有一组根标签）
var login = {template:'<h1>这是一个登陆组件</h1>'}
建路由实例对象
var vueroute = new VueRouter({ routes:[{path:'/login',component:login},{path:'/register',component:register}]})
将路由实例对象挂载到vue实例上
在html结构上加个容器<router-view></router-view>
加路由切换 router-link （tag属性表示渲染成什么标签）
<router-link to="/login" tag="span">登录</router-link>
<router-link to="/register">注册</router-link>

给路由传参

方法一：
1.router-link 标签里to 属性后加?id=10&name=ww
2.使用this.$route.query.id 来获取传过来的参数
方法二：
1.路由实例化时 path改为/login/:id/:name
2.router-link 标签里to属性里加/10/ww
3.通过this.$route.param.id来获得数据

给路由切换加动画效果

1.用transition标签将router-view包裹,mode属性out-in表示先出后进
<transition mode="out-in"> <router-view></router-view> </transition>
2.定义样式.v-enter,.v-leave-to;.v-enter-active,.v-leave-active

代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewreport" content="width=device-width initial-scan=1.0">
        <meta http-equiv="X-UA-Compatible" content="id=edge">
        <title>vue-route练习</title>
        <script src

最低0.47元/天解锁文章

一只前端蜗牛

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue路由及案例

前端路由和后端路由的区别：后端路由：对应相应服务器的资源的url就叫后端路由，这种路由请求会调用服务器资源前端路由：只在浏览器跳转，不涉及服务器请求。通过hash（#）来实现的。http请求中不会包含hash相关的内容。...
复制链接

扫一扫