vue—router篇深夜写文

vue-router使用心得

一 抒情偏：

      首先请先让抒个情，毕竟我也是个骚年，自从敲上代码后每天都是枕戈待旦，砥砺前行，如履薄冰，希望不负汗水，不负哪些被敲坏的键盘，摔坏的鼠标，夜凉如水，而此时此刻我还在奋笔疾书。

二：简单介绍

router是干什么的？

通过router来实现各个各个组件之间的组合，来实现sap页面应用。

使用步骤：

1，在vue JS模块中引入：

import Vue from 'vue';

import VueRouter from 'vue-router';

2，注册路由插件

Vue.use(VueRouter);

配置路由：

new VueRouter({ 先写个路由器

routes:[

{

path:"/路径"

component: about 组件

{

        path: '/',

        redirect: '/about' // 默认路由

      }}]

配置嵌套路由  children

    path: '/home',

    component: home,

    children: [

      {

        path: 'news',

        component: news

      },

      {

        path: 'message',

        component: message

      }

    ]

配置router链接

router--link：用来生成路由链接

router- vive  : 用来显示当前路由组件界面

三：编程式导航

想要得到导航不同的url ，就要使用router.push方法。这个方法会向history栈添加一个新的记录，当用户点击浏览器  后退按钮时 会退到url。

四：导航的护卫

如果想要实现每个路由进入前进行判断，满足条件才进行跳转，否则跳转到特定的页面，这个时候我们就要用到vue-router  beforeEach这个方法来实现而他与三个参数：

to：router进入的目标对象

from：router导航要离开的路由

next:function 一定要调用改方法来resolve这个钩子执行效果依赖next方法的调用

注册全局的方法：

const  router =new Vuerouter({})

router .beforeeach((to ,from ,next))=>{

}

不写demol心累

总结：

今晚就总结到这吧,不喜勿喷，成长路上在于点滴积累，知识在于分享，路的方向对了，不管多曲折，多艰难都要走下气，结绳记事，不负好时光----------汪少。