vue不定时更新之全家桶基础应用

1.vue-router

跳转页面功能

router-view 嵌套路由，加深项目层级

1 vue2.1.0 新增include/exclude 2 <template>
3      <div>
4          <keep-alive include="a,b,c">     //缓存包括 name 为 a,b,c 的组件，也可正则匹配     :include="reg"        
5              <router-view></>
6          </keep-alive>
7      </div>
8 </template>

 

router-link 映射路由，相似标签 a

1 <router-link to="/index"></router-link>

 

编程式导航 this.$router.push 与 router-link 相同

 1 <template>
 2     <div>
 3         <button @click="to"></button>
 4     </div>
 5 </template>
 6 <script>
 7     export default {
 8         methods: {
 9             to () {
10                  this.$router.push({name: 'article'，id:'自定义'})  
11             }
12         }
13     }
14 </script>                                

 

this.$router.push 传参，适合非父子直接传递数据用。注：非父子组件传递不建议用 bus event，请使用 vuex

// 字符串,这里的字符串是路径path匹配噢，不是router配置里的name
this.$router.push('home')

// 对象
this.$router.push({ path: 'home' })

// 命名的路由 这里会变成 /user/123
this.$router.push({ name: 'user', params: { userId: 123 }})

// 带查询参数，变成 /register?plan=private
this.$router.push({ path: 'register', query: { plan: 'private' }})

 

 1 //路由配置
 2 export default new Router({
 3     routers: [
 4          { name:'home', path:'/home',compontent:Home}
 5     ]
 6 })
 7 
 8 //经过 name 获取页面，传递 params
 9 this.$router.push({ name:'home', params:{ userId: this.arg1}});
10 this.$router.push({ path:'/home', query:{ index: index, row: row}})
11
12 //目标页面
13 {{this.$route.params.userId}} 或 {{this.$route.query.row.XXX}}

 

动态参数应用

router\index.js 中路由组件映射

 1 import Vue from 'vue'
 2 import Router from 'vue-router'
 3 import Article from 'article路径'
 4 Vue.use(Router)
 5 const router = new Router({
 6     routes: [
 7         {
 8           path: '/article/:id.html',   //动态参数 id，前端可以使用 this.$route.params.id 获取，node 可以使用 req.params.id 获取
 9           name: 'article',
10           component: Article
11         }
12     ]
13 })
14 export default router

router-link 动态映射+事件 native，注：路由传参如 key 没有要求必定在 router/index.js 中显示 path：'/:id/:random'

<router-link :to="{name:'article', params{id:自定义字符,key:XXX,random:XXX}， path: 'balabala'}" @click.native='meth'></router-link>  /* 路由添加事件要加个native */

 

Get请求传参

样例：http://localhost:8080/linkParamsQuestion?age=18

获取：

let age = this.$route.query.age; //问号后面参数会被封装进 this.$route.query;

 

路由监听

 1 export default {
 2     watch : {
 3           '$route':'meth' //监听方法meth
 4     },
 5     methods :{
 6         meth () {
 7            if(this.$route.path==='/'||this.$route.path==='/login')                {
 8             console.log('change')
 9         }else{
10             console.log('nochange')
11         }
12     }
13 }                

 

导航钩子

导航钩子函数，主要是在导航跳转的时候作一些操做，好比能够作登陆的拦截，权限校验，而钩子函数根据其生效的范围能够分为 全局钩子函数、路由独享钩子函数和组件内钩子函数。

全局钩子函数

能够直接在路由配置文件router.js里编写代码逻辑。能够作一些全局性的路由拦截。

router.beforeEach((to, from, next)=>{
  //do something
  next();
});
router.afterEach((to, from, next) => {
    console.log(to.path);
});

每一个钩子方法接收三个参数：

• to: Route: 即将要进入的目标 路由对象

• from: Route: 当前导航正要离开的路由

• next: Function: 必定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

• next(): 进行管道中的下一个钩子。若是所有钩子执行完了，则导航的状态就是 confirmed （确认的）。

  • next(false): 中断当前的导航。若是浏览器的 URL 改变了（多是用户手动或者浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。

  • next('/') 或者 next({ path: '/' }): 跳转到一个不一样的地址。当前的导航被中断，而后进行一个新的导航。

确保要调用 next 方法，不然钩子就不会被 resolved。

路由独享钩子函数

能够作一些单个路由的跳转拦截。在配置文件编写代码便可

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

组件内钩子函数

更细粒度的路由拦截，只针对一个进入某一个组件的拦截。

 

const Foo = {
  template: `...`,
  beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不！能！获取组件实例 `this`
    // 由于当钩子执行前，组件实例还没被建立
  },
  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，可是该组件被复用时调用
    // 举例来讲，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 因为会渲染一样的 Foo 组件，所以组件实例会被复用。而这个钩子就会在这个状况下被调用。
    // 能够访问组件实例 `this`
  },
  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 能够访问组件实例 `this`
  }
}

 

钩子滚动行为

scrollBehavior 方法接收 to 和 from 路由对象。
第三个参数 savedPosition 当且仅当 popstate 导航 (mode为 history 经过浏览器的 前进/后退 按钮触发) 时才可用。
这里就不细致的讲了，文档都有也很是简单，记住有这个东西就行。

const router = new VueRouter({
  routes: [...],
  scrollBehavior (to, from, savedPosition) {
    // return 指望滚动到哪一个的位置
  }
})

//全部路由新页面滚动到顶部： scrollBehavior (to, from, savedPosition) { return { x: 0, y: 0 } } //若是有锚点 scrollBehavior (to, from, savedPosition) { if (to.hash) { return { selector: to.hash } } }

 

路由元信息

这个概念很是简单，就是在路由配置里有个属性叫 meta，它的数据结构是一个对象。你能够放一些key-value进去，方便在钩子函数执行的时候用。
举个例子，你要配置哪几个页面须要登陆的时候，你能够在meta中加入一个 requiresAuth标志位。

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      meta: { requiresAuth: true }
    }
  ]
})

而后在 全局钩子函数 beforeEach中去校验目标页面是否须要登陆。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    //校验这个目标页面是否须要登陆
    if (!auth.loggedIn()) {  
      next({
        path: '/login',
        query: { redirect: to.fullPath }
      })
    } else {
      next()
    }
  } else {
    next() // 确保必定要调用 next()
  }
})

这个auth.loggedIn 方法是外部引入的，你能够先写好一个校验是否登陆的方法，再import进 router.js中去判断。

2.other

vue 请求返回状态码 304 缘由之一：可能使用了 keep-alive 缓存

 

3.数据传递，数据监听与改变

https://blog.csdn.net/lander_xiong/article/details/79018737   组件通讯

https://cn.vuejs.org/v2/guide/components-props.html

1.子组件获取父组件数据，props

2.子组件触发父组件方法，$emit 触发，@监听

3.父组件触发子组件属性和方法，注册ref