发表于 | 更新于 | 分类于

路由过渡动画就是在切换路由的时候加点动画效果，这里就是把router-view用transition包起来，然后给他个name叫fade， 然后fade有四个类名，就通过这四个类名给路由加动画即可，更酷炫的效果需要有css和js功底，当然也可以用插件，然后还有个mode属性,他只有两个值，一个是in-out一个是out-in顾名思义就知道什么意思了，这里我们用out-in更好看一点

阅读全文 »

发表于 | 分类于

alias别名的作用与redirect的重定向差不多，只不过alias更友好一点，他不会在用户那边地址栏上把url改了

阅读全文 »

发表于 | 分类于

重定向实质上就是在路径不同的情况下我想跳转到同一页面的需求，下面将展示传参数和不穿参数的两种重定向，操作很简单,在index.js中就是把想要定位的路径复制到redirect里

阅读全文 »

发表于 | 分类于

虽然现在前后端分离，之间的数据传递用接口，但是url传值方法还是很常用的

第一步：在index.js文件的路径中添加想传的值

1
2
3
4
5
{
      path: '/Hi/:newsId(\\d+)/:newsTitle',
      name: 'Hi',
      component:Hi
}

可以看到我只需要在path后加:/就好，同时还用()方式在里面加了个正则表达式，规定只允许传递过来的是数字，当非数字时就不显示

第二步：在App.vue中通过router-link传递值

1
<router-link to="/Hi/12/hhhhhh">Hi</router-link>

注意到，我的id传的是数字才行

第三步：在Hi.vue中接收值

1
2
<p>{{ $route.params.newsId}}</p>
<p>{{ $route.params.newsTitle }}</p>

特别要注意的是，只能是params，别写成Hi了，因为在vue中params就是用来传参数的量

发表于 | 更新于 | 分类于

vue-router中提供了两种传参方式，一种是name传递法，另一种是绑定to的传递方法。第一种不常用,因为第一种的name实际上用在第二种的参数上

阅读全文 »

发表于 | 更新于 | 分类于

子路由的应用可以说还是很广的，也就是说当我给某个组件设置了子路由，那么每当我点击这个子路由，这个组件都会显示，就好像淘宝里的推荐，当我选中一类时他会给你推荐相似的，而我这一类会一直留在界面上，只是在下面展示我的各个子路由，下面就来操作一下子路由的配置方法

第一步： 还是新建新的组件，就不多说了

第二步：去到要配置子路由的组件

1
2
3
4
5
6
<template>
  <div class="Hi">
      <p>{{msg}}</p>
      <router-view></router-view>
  </div>
</template>

一定一定要注意我们引入路由机制的这个标签位置很重要，他必须写在一个有内容的的大标签里（这里是div），不然你一写这个标签就会疯狂报错

第三步：去index.js配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Hi from '@/components/Hi'
import Hi1 from '@/components/Hi1'
import Hi2 from '@/components/Hi2'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },{
      path:'/Hi',
      name:'Hi',
      component:Hi,
      children:[
        {path:'/',component:Hi},
        {path:'Hi1',component:Hi1},
        {path:'Hi2',component:Hi2}
      ]
    }
  ]
})

首先：一定要import

然后就去写子路由器配置了，他是写在指定的那个component底下，他也是个数组，根据每个路由都是一个对象相应的去写，因为现在还用不上name，所以这里先省略了name，特别要注意的是，path的写法，后两个是没有/的

第四步：去入口文件App.vue改写模板

1
2
3
4
5
6
<div>
   <router-link to="/">首页</router-link>
   <router-link to="/Hi">Hi页面</router-link>
   <router-link to="/Hi/Hi1">Hi1页面</router-link>
   <router-link to="/Hi/Hi2">Hi2页面</router-link>
   </div>

实际上就是加了后两行

发表于 | 更新于 | 分类于

vue-router是vue的很重要的一部分，他不是物理的那种路由器啊啥的，可以把他理解为像a标签，但是因为vue-cli开发出来的实际上是单页面应用，所以用a标签是不够用的，因此vue帮我们配置了这么一个功能，首先就先了解一下要用到的几个重要文件

阅读全文 »

发表于 | 分类于 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div id="app">
         <liuxue>
             <!-- 用 key value形式传递数据 -->
             <p slot="url">{{liuxueData.url}}</p>
             <p slot="name">{{liuxueData.name}}</p>
             <p slot="skill">{{liuxueData.skill}}</p>
         </liuxue>
     </div>
     <template id="liu">
         <!-- Vue2.0规定必须用大的包个小的 -->
         <div>
             <!-- 接收数据 -->
             <p>博客地址：<slot name="url"></slot></p>
             <p>姓名：<slot name="name"></slot></p>
             <p>技能：<slot name="skill"></slot></p>
         </div>
     </template>
     <script>
         var liuxue = {
             template:'#liu'
         }
         var app =  new Vue({
             el:'#app',
             data:{
                 liuxueData:{
                     url:'snowFlakeXue.github.io',
                     name:'liuxue',
                     skill:'前端'
                   }
             },
             components:{
                 'liuxue':liuxue
               }
         })
     </script>

发表于 | 分类于

在构造器外添加事件$on

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<div id="app">
      <p>{{count}}</p>
      <p><button @click="add">add</button></p>
  </div>
  <p><button onclick="reduce()">reduce</button></p>
  <script>
      var app = new Vue({
          el:'#app',
          data:{
              count:1
          },
          methods:{
              add:function(){
                  this.count++
              }
          }
      })
      app.$on('reduce',function(){
          this.count--;
          console.log('构造器外方法被调用')
      })
      function reduce(){
          app.$emit('reduce')
      }
      //当按钮在作用域外用$emit调用

once事件$once

1
<p><button onclick="reduceOnce()">reduceOnce</button></p>
1
2
3
4
5
6
7
app.$once('reduceOnce',function(){
         this.count--;
         console.log('只执行一次的方法被调用')
     })
     function reduceOnce(){
         app.$emit('reduceOnce')
     }

off事件$off

1
<p><button onclick="off()">off</button></p>
1
2
3
function off(){
        app.$off('reduceOnce')
      }