<!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. 【洛谷】【搜索(dfs)】P3956 棋盘

    题目传送门:戳 题目描述: 有一个 \(m * m\) 的棋盘,棋盘上每一个格子可能是红色.黄色或没有任何颜色的.你现在要从棋盘的最左上角走到棋盘的最右下角. 任何一个时刻,你所站在的位置必须是有颜色 ...

  2. 倒水问题（Fill, UVa 10603）

    [题目描述] 有三个没有刻度的水壶,容量分别为a,b和c(单位为升,都是<=200的正整数).初始时前两个水壶是空的,而第三个装满了水.每次可以从一个水壶往一个水壶里倒水,直到一个水壶倒空或者另 ...

  3. Yii2.0页面提示消息

    适用情况:比如提交一个表单,提交完成之后在页面展示一条提示消息. 控制器里面这样写: 单条消息: \Yii::$app->getSession()->setFlash('error', ' ...

  4. smartpass

    1.smartpass 是用户注册后,产生的用户名密码 与每个摄像头的用户名密码不一致 2.每个设备初始化登录密码为admin admin,如果需要修改,则在进入该设备IP地址,设置——>用户管 ...

  5. docker swarm英文文档学习-8-在集群中部署服务

    Deploy services to a swarm在集群中部署服务 集群服务使用声明式模型,这意味着你需要定义服务的所需状态,并依赖Docker来维护该状态.该状态包括以下信息(但不限于): 应该运 ...

  6. python函数查询、数学和比较操作符、二元操作符

    http://www.runoob.com/python/func-number-round.html print().input()用户输入输出,格式为字符串 len() 求字符串的长度 str() ...

  7. 广告牌LED灯阵

    大家都知道广告牌里面原来都是灯管,现在开始更换成LED灯了,下面是我在现场拍的图片: 下面这个图片是LED灯条,铝基板打印电路,TM1812驱动,该IC可以接受4组24位数据,然后转发数据(https ...

  8. Redis缓存的使用

    首先需要去Redis官网下载Redis的安装包 要在eclipse中使用Redis还需要两个jar包,需要的自行查找或者联系我 运行Redis需要开启Redis的服务端,也就是下载的安装包中的“red ...

  9. .NET小笔记-NPOI读取excel内容到DataTable

    下载比较新的NPOI组件支持excel2007以上的,把.dll添加引用 引入命名空间 using NPOI.HSSF.UserModel;using NPOI.SS.UserModel;using ...

  10. zuul简单使用

    zuul路由的几个配置参数1.静态路由 zuul: routes: myroute1: path: /mypath/** url: http://localhost:8080 (注意这里url要htt ...