<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width,initial-scale=1.0">

    <title>y</title>

    <script src="../assets/vue.js"></script>

    <script src="../node_modules/vue-router/dist/vue-router.js"></script>

    <link rel="stylesheet" href="../assets/animated.css">

    <style>

     .router-link-active{

         color: #606060;

         font-size: 18px;

     }

    </style>

  </head>

  <body>

    <div id="app">

    <router-link to="/home">主页</router-link>

    <router-link to="/news">新闻</router-link>

    <transition enter-active-class="animated slideInLeft" leave-active-class=" animated slideInRight"> //路由动画使用

        <router-view></router-view>

    </transition>

    </div>

    <script>

      // 创建组件

      let Home = {template:`

       <div>

        <h1>主页</h1>

        <router-link to='/home/user'>用户</router-link >

        <keep-alive>

            <router-view></router-view>

        </keep-alive>

       </div>

      `};

      let News = {template:'<h1>新闻</h1>'};

      let User ={template:'<input type="text" >'}

      // 配置路由

      let routes=[

              {

                  path:'/home',component:Home,

                  children:[

                      {

                          path:'user',

                          component:User

                      }

                  ]

              },

              {path:'/news',component:News},

              {path:'*',redirect:'/home'}   //首页展示重定向

              ]

      // 生成路由实例

      const router = new VueRouter({

           routes

      })

      // 挂载到vue上

      let app = new Vue({

        router,

        data:{

         s:''

        }

      }).$mount('#app')

    </script>

  </body>

</html>

在methods中用函数去触发它：

this.$router.push({name:'user',params:{:id:555}}) //path不能和params一起使用

this.$router.push({path:'/user/555',query:{name:'linda',age:'12'}});//name可以和params一起使用

router使用以及vue的动画效果的更多相关文章

  1. 049——VUE中使用animation与transform实现vue的动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. vue购物车动画效果

    使用动画的三个函数 v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter=&q ...

  3. vue过渡动画效果

    1 过渡基础 1.1 过渡的方式 Vue 在插入.更新或者移除 DOM 时,提供多种不同方式的应用过渡效果. 包括以下工具: 在 CSS 过渡和动画中自动应用 class 可以配合使用第三方 CSS ...

  4. vue2.0 仿手机新闻站（七）过滤器、动画效果

    1.全局过滤器 (1)normalTime.js  自定义 将 时间戳 转换成 日期格式 过滤器 /** * 将 时间戳 转换成 日期格式 */ export const normalTime = ( ...

  5. 067——VUE中vue-router之使用transition设置酷炫的路由组件过渡动画效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  6. Vue中过度动画效果应用

    一.实现动画过渡效果的几种方式 实现动画必须要将要进行动画的元素利用<transition>标签进行包裹 1.利用CSS样式实现过渡效果 <transition name=" ...

  7. vue中多个元素或多个组件之间的动画效果

    多个元素的过渡 <style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-acitve,.v-leave-active{ opacity: ...

  8. vue实现多个元素或多个组件之间动画效果

    多个元素的过渡 <style> .v-enter,.v-leave-to{ opacity: 0; } .v-enter-acitve,.v-leave-active{ opacity: ...

  9. vue动画效果出现重叠，并且出现滚动条

    背景 使用 vue 结合 animated css 第三方动画样式,简单地给页面组件加上切换时的 fade 淡入/淡出动画效果 当调试效果时发现,展示效果出现了问题,并且出现滚动条 原因 退场动画还没 ...

随机推荐

  1. MySql常用命令集Mysql常用命令3

    MYSQL常用命令 有很多朋友虽然安装好了mysql但却不知如何使用它.在这篇文章中我们就从连接 MYSQL.修改密码.增加用户等方面来学习一些MYSQL的常用命令. 有很多朋友虽然安装好了mysql ...

  2. Qt读取文件时中文乱码问题

    在默认情况下,Qt 以 Unicode 格式处理文本字符,因此,字符本身是不会有问题的.之所以出现乱码,原因在于 Qt 不知道将 Unicode 字符以何种方式显示出来.        文本文件含有简 ...

  3. springdashboard环境搭建

    SpringCloud Hystrix Dashboard Hystrix-dashboard是一款针对Hystrix进行实时监控的工具,通过Hystrix Dashboard我们可以在直观地看到各H ...

  4. Objective-C atomic属性不是线程安全的

    atomic(原子的),顾名思义,原子操作应该是线程安全的,然而,真相并不是! @property (atomic, strong) NSMutableArray *arr; // 多线程操作arr并 ...

  5. linux下打包压缩和解压命令

    .tar 压缩:tar cvf FileName.tar FileName 解压:tar xvf FileName.tar .gz解压1:gunzip FileName.gz解压2:gzip -d F ...

  6. Git使用—第一讲：初识版本控制工具

    几乎所有出色的项目都不是一个人完成的,而是由一个团队共同合作开发完成的,这个时候多人之间的代码同步问题就显得异常重要了,因此版本控制工具也就应运而生了.常见的版本控制工具主要有SVN和Git,接下来要 ...

  7. 不存在具有键“xxxId”的“IEnumerable<SelectListItem>”类型的 ViewData 项

    项目中的某个页面,在访问时出现以下错误: 不存在具有键“xxxId”的“IEnumerable<SelectListItem>”类型的 ViewData 项 具体的场景说明如下: 一个编辑 ...

  8. 使用Webuploader大文件分片传输

    背景:50G大文件的HTTP上传至服务器. 好了,根据这个命题,可以开始研究我们怎么做才能把这么大的文件上传成功. 分片上传是肯定的,断点续传也是要有的,进度可视化那就更好了,基于这些,我选择了Web ...

  9. 推荐几本对于Python初学者比较好的书籍（内含PDF）

    我们提供一个初学者最好的Python书籍列表.Python是一个初级程序员可以学习编程的最友好语言之一.为了帮助您开始使用Python编程,我们分享此列表.泡一杯茶,选一本书阅读,开始使用Python ...

  10. SQL Server中删除用户时报错，提示：The database principal owns a schema in the database, and cannot be dropped（转载）

    Description of the problem: When you tried to drop a user, you got this message: Error: 15138 The da ...