<!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如何修改开启允许远程连接 (windows)

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code 关于mysql远程连接的问题,大家在公司工作中,经常会遇到mysql数据库存储于某个人的电脑上 ...

  2. 转载 互斥体与互锁 <第五篇>

    互斥体实现了“互相排斥”(mutual exclusion)同步的简单形式(所以名为互斥体(mutex)).互斥体禁止多个线程同时进入受保护的代码“临界区”.因此,在任意时刻,只有一个线程被允许进入这 ...

  3. PAT A1073 Scientific Notation （20 分）——字符串转数字

    Scientific notation is the way that scientists easily handle very large numbers or very small number ...

  4. AI mac安装TensorFlow

    1.安装pip sudo easy_install pip 2.安装virtualenv sudo pip install --upgrade virtualenv 3.在指定目录创建virtuale ...

  5. luogu P4403 [BJWC2008]秦腾与教学评估

    题目 一道神奇的题qwq 首先看题很容易想到把所有的点存下来然后暴力枚举...于是RE 20分 所以要找一种不用开那么大的数组的解法(然而我自己是不可能想出来的qwq 注意一个地方,人数为奇数的位置“ ...

  6. 重度使用示波器进行优化分析——一个DSDA项目回顾

    这是若干年前一个项目,最近有时间整理一下.回忆起来,印象最深刻的就是重度使用示波器辅助分析,进行优化. 项目背景是在原有项目3G+项目基础上,增加一颗2G+ Modem,使支持DSDA功能. 在介绍D ...

  7. ueditor保存出现 从客户端(Note="<p>12345</p>")中检测到有潜在危险的 Request.Form 值

    检测到有潜在危险的 Request.Form 值   这种问题是因为你提交的Form中有HTML字符串,例如你在TextBox中输入了html标签,或者在页面中使用了HtmlEditor组件等,解决办 ...

  8. apache、nginx的虚拟域名配置和rewrite配置，以及web缓存的几种方式

    web缓存一般用来缓解数据库压力. 通常有几种方法,文件静态化,缓存服务memcached.redis等. 伪静态,一般指在url上貌似访问静态html页的形式,这样有利于搜索引擎访问到网站页面,实际 ...

  9. Linux安装RabbitMq-Centos7版本

    一.Linux系统中安装RabbitMQ 由于RabbitMQ依赖于Erlang,所以先要在机器上安装Erlang环境 单机版 1.安装GCC GCC-C++ Openssl等模块 yum -y in ...

  10. 【webstorm】注册码 更新笔记

    20190225 1.修改hosts文件,windows的hosts文件路径是  C:\ Windows \ System32 \ drivers \ etc \ hosts 0.0.0.0 acco ...