<!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. go标准库的学习-net/url

    参考:https://studygolang.com/pkgdoc 导入方式: import "net/url" url包解析URL并实现了查询的逸码,参见RFC 3986. fu ...

  2. JAVA体系的线程的实现，线程的调度，状态的转换

    java体系中线程的实现 1.使用内核线程实现 内核线程就是直接由操作系统内核支持的线程,这种线程由内核来完成线程切换,内核通过操作调度器对线程进行调度,并负责将线程的任务映射到各个处理器上,每个内核 ...

  3. 5-(基础入门篇)学会刷Wi-Fi模块固件(刷LUA版本固件)

    http://www.cnblogs.com/yangfengwu/p/9065559.html 基础教程源码链接请在淘宝介绍中下载,由于链接很容易失效,如果失效请联系卖家,谢谢 https://it ...

  4. SQLServer 窗口函数（转载）

    一.窗口函数的作用 窗口函数是对一组值进行操作,不需要使用GROUP BY 子句对数据进行分组,还能够在同一行中同时返回基础行的列和聚合列.窗口函数,基础列和聚合列的查询都非常简单. 二.语法格式 窗 ...

  5. Luogu2046 NOI2010 海拔 平面图、最小割、最短路

    传送门 首先一个不知道怎么证的结论:任意点的\(H\)只会是\(0\)或\(1\) 那么可以发现原题的本质就是一个最小割,左上角为\(S\),右下角为\(T\),被割开的两个部分就是\(H=0\)与\ ...

  6. .Net Core 系列之一 hello world

    OS: win10 企业版 中文环境 .Net Core: 切记不要装64版本,否则可能会出现vs2017无法生成.net core 2.0的项目 dotnet-sdk-2.0.0-win-x86.e ...

  7. 51Nod 1815 调查任务

    发现绍一的人很喜欢做51nod,不得不说这还是一个很全能的良心OJ 但是做的这道题就一点都不良心了,简直是毒瘤,调了一早上 首先我们考虑让一条路径的\(a_x\ mod\ a_y\)的值最大,我们简单 ...

  8. ubuntu12.04安装mininet

    网上安装mininet教程有很多,都是通过git命令安装,但有一个坑,安装到./install.sh时会报错,记录下来 1.通过git 下载mininet git clone git://github ...

  9. 通过git命令行从github或服务器上克隆、修改和更新项目

    项目开发时,为了方便版本管理,许多公司采用git来控制项目版本.简单介绍下: 第一步:在本地新建一个文件夹,作为本地仓库,如“test”.打开git bash,进入到该文件夹目录下,如下图: 第二步: ...

  10. 将 C# 枚举序列化为 JSON 字符串 基础理论

    该转换过程需要引用 Newtonsoft.JSON,这其中的转换过程还是蛮有意思的. 一.定义枚举 /// <summary> /// 托寄物品枚举 /// </summary> ...