<!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. Coprime （单色三角形+莫比乌斯反演（数论容斥））

    这道题,先说一下单色三角形吧,推荐一篇noip的论文<国家集训队2003论文集许智磊> 链接:https://wenku.baidu.com/view/e87725c52cc58bd631 ...

  2. (4)top详解 (每周一个linux命令系列)

    (4)top详解 (每周一个linux命令系列) linux命令 top详解 引言:今天的命令是用来看cpu信息的top top 我们先看man top top - display Linux pro ...

  3. 安装docker后访问外网失败

    服务器网段是(172.17)与docker默认桥接的网桥号段相同 docker version 17.03.2-ce 1.centOS6 原文链接 http://www.bubuko.com/info ...

  4. Maven快照机制（SNAPSHOT）

    文章转自 http://www.cnblogs.com/EasonJim/p/6852840.html 以下引用自https://ayayui.gitbooks.io/tutorialspoint-m ...

  5. 使用cmd导出mysql数据到excel

    windows环境 (有时候复制的不好使,最好可以手动输入一次试试) 1.windows + R 输入cmd弹出命令框 2.cd  C:\Program Files\MySQL\MySQL Serve ...

  6. zabbix学习-zabbix安装

    本次安装教程完全参考官方rpm安装教程: https://www.zabbix.com/documentation/3.4/zh/manual/installation/install_from_pa ...

  7. 深入浅出的webpack构建工具---DevServer配置项(二)

    深入浅出的webpack构建工具---DevServer配置项(二) 阅读目录 DevServer配置项 1. contentBase 2. port 3. host 4. headers 5. hi ...

  8. 外部Jenkins调用容器中Slave配置实践

    1.Jenkins配置 实现动态生成的Slave节点并调用,解决构建项目出现slave节点任务堵塞或者是slave宕机问题.容器平台采用openshift. 参考配置文档:https://blog.c ...

  9. [Oracle]如何获得出现故障时，客户端的详细连接信息

    [Oracle]如何获得出现故障时,客户端的详细连接信息 客户坚持说 只是在 每天早上5点才运行下面的语句: select / * + FULL (TAB001_TT01) * / 'TAB001_T ...

  10. Solr数据库导入

    Solr数据库导入 1.在MySQL中创建一张表t_solr,并插入测试数据. 2.把E:\Solr\solr-4.10.4\example\example-DIH\solr\db\conf下的adm ...