Vue路由

Vue 阅读量

      路由是端到端的数据传输路径。说白了，和a标签实现的功能一样,就是跳转。使用 a 标签点击多少次，就会发送多少次的网络请求。也就是当前页面会实现不停的刷新。而 vue-router 是一个与 vue 核心深度集成的前端路由框架，性能也优化的更好。输入的 URL 地址不会直接向服务器发送请求，而是浏览器 自己来解析路由信息，包括地址，参数 ,然后来渲染组件。最后生成对应的视图。前端路由一般只向服务器获取数据，而不向服务器获取模板。Vue 路由可以帮助我们实现点击后，不会请求和页面刷新，直接就可以跳转到我们要去的位置。

安装

      大多数使用 Vue CLi 搭建的时候有安装路由模块，如果没有安装的话可以使用以下命令安装

1
npm install vue-router --save-dev

基本使用

1.在 router/index.js 中引入对应组件

1
2
3
4
import Vue from 'vue'
import Router from 'vue-router'
import About from '@/components/about/About'
import Admin from '@/components/Admin'

2.在 router/index.js 使用 Router

1
Vue.use(Router)

3.在 router/index.js 配置路由

1
2
3
4
5
6
7
8
9
10
11
export default new Router({
  routes: [
    {
      path: '/',  //路由地址
      name: 'Home',  //路由名
      component: Home,   //如果抓到了路由地址，需要让它调用component
    },
  ],
  //去掉URL中的#
  mode: 'history',
})

4.在对应组件中使用

      使用router-link 组件来导航，默认会被渲染成一个<a>标签，属性 to指定链接

1
2
3
4
5
6
7
  <ul>
    <li>
        <router-link to="/">Home</router-link>
    </li>
</ul>
//展示对应路由视图
<router-view/>

进阶使用

      以上的基本使用能帮我们搭建一个快速的路由。但是在实际的项目开发中开始远远不够的。接下来我们用官方提供的 API来总结一下常用的路由配置吧。

      router-link 默认是一个 a 标签，想要换成其他标签，就需要用到tag属性

1
<router-link  tag=“div">{{nav.text}}</router-link>
1
2
//看，换成div了吧
<div data-v-61dd7a3d="" class="nav-link">注册</div>

绑定动态路由地址

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<template>
    //:to
    <router-link :to="login">登录</router-link>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      login: "/Login",
    };
  }
};
</script>

找不到路由时，默认返回某页

      这里我们需要注意的是：含有通配符的路由应该放在最后，路由 { path: ‘*‘ } 通常用于客户端 404 错误。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/Menu',
      name: 'Menu',
      component: Menu
    },
    //上面这些东西没有匹配上，就会走*号,跳转回主页
    {
      path: '*',
      redirect: '/'
    },
  ],
  mode: 'history',
})

利用路由名跳转

1
<router-link :to="{name:'Register'}">注册</router-link>

跳转到上一次浏览的页面

1
this.$router.go(-1);

跳转到指定地址

1
2
3
this.$router.replace("/Menu")
//通过名字跳转
this.$router.replace({ name: "Admin" });

通过 push 进行跳转

1
2
3
this.$router.push("/Login");
//通过名字
this.$router.push({ name: "Login" });

路由嵌套

要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置

router/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
28
29
30
31
32
33
34
35
36
export default new Router({
  routes: [
    {
      path: '/about/About',
      name: 'About',
      component: About,
      //默认展示路由
      redirect: '/about/About/History',
      // 二级路由
      children: [
        //path可以自己定
        {
          path: '/about/About/Contact',
          name: 'Contact',
          component: Contact,
          redirect: '/about/About/Contact/Phone',
          //三级路由
          children: [
            { path: '/about/About/Contact/Phone', name: 'Phone', component: Phone },
            { path: '/about/About/Contact/PersonName', name: 'PersonName', component: PersonName },
          ]
        },
        {
          path: '/about/About/Delivery',
          name: 'Delivery',
          component: Delivery
        },
        {
          path: '/about/About/History',
          name: 'History',
          component: History
        }
      ],
    },
  ]
})

导航守卫

      导航守卫我们可以把它看做是 vue-router 的生命周期钩子。我们通过”用户在某网站在买东西，很多时候都需要先登录或注册“这么一个场景来更好的理解导航守卫吧。

全局守卫

全局前置守卫 router.beforeEach

      接下来，我们用 Vue 的全局守卫实现一个场景：当用户在未登录某网站前，每跳转一个页面，都提示用户”未登录，请登录“

1
2
3
4
5
6
7
8
9
10
router.beforeEach((to, from, next) => {
  //判断用户是否去登录或者注册页
  if (to.name == 'Login' || to.name == 'Register') {
    next();
  } else {
    alert("未登录，请登录");
    //未登录就引导到登录页面上，也可以这么写next({ path: '/' })
    next('/Login');
  };
});

我们用router.beforeEach 注册一个全局前置守卫。它进入组件之前触发它接受三个参数：

1.to——要跳转到哪个组件里面去

2.from——从哪个路由离开

3.next: Function—— 一个方法，决定是否要展示看到路由的页面

全局后置钩子 router.afterEach

      有全局前置守卫，当然也有全局后置钩子啦。但是基本上全局前置守卫使用的较多，后置钩子使用的较少。

1
2
3
4
router.afterEach((to, from) => {
  //进入组件后，展示出来
  alert("after each");
});

我们用router.afterEach 注册全局后置钩子。它进入组件之后触发它接受两个参数：

1.to——要去的组件

2.from——离开的组件

路由独享守卫 beforeEnter

      在进入某个路由前，调用的方法。只针对路由控制的部分。我们还是用代码来实现一个场景帮助我们更好的理解吧。比如：用户在去购买页前，需要判断是否登录，如果没有登录，要先登录。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
export default new Router({
  routes: [
    {
      path: '/Buy',
      name: 'Buy',
      component: Buy,
      //路由独享守卫
      beforeEnter: (to, from, next) => {
        if (to.name == 'Login' || to.name == 'Register') {
          next();
        } else {
          alert("未登录不能购买");
          //引导到登录页面上
          next('/Login');
        };
      },
    },
  ],
})

      在需要配置的路由上上定义 beforeEnter 守卫。它和全局前置守卫的方法参数一致。

组件内守卫

      我们可以直接在路由组件内定义路由导航。在进入路由时，我们可以对它进行一些操作，离开路由后，我们也可以进行一些操作。

进入到当前组件的时 beforeRouteEnter
1
2
3
4
5
6
7
8
9
10
11
12
export default {
  name: "Menu",
  data() {
    return {
      name: "Hery"
    };
  },
  //进入到当前组件的时
  beforeRouteEnter(to, from, next) {
     alert("Hello" + this.name);
  }
};

注意：以上的写法，我们会发现拿不到name,因为 data 渲染之前，beforeRouteEnter 就已经执行了。我们需要通过传一个回调给 next 来访问组件实例。因为是异步的，所以在 data 渲染完，就可以拿到值。

1
2
3
4
5
6
7
8
9
10
11
12
13
export default {
  name: "Menu",
  data() {
    return {
      name: "Hery"
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      alert("Hello" + vm.name);
    });
  },
};
离开当前组件时 beforeRouteLeave
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
export default {
  name: "Menu",
  data() {
    return {
      name: "Hery"
    };
  },
  //离开当前组件时
  beforeRouteLeave(to, from, next) {
    if (confirm("确定离开吗") == true) {
      next();
    } else {
      //不显示
      next(false);
    }
  },
};
当前路由改变，但是该组件被复用时 beforeRouteUpdate
1
2
3
4
5
6
export default {
  //在动态路由情形下，比如 path: '/user/:id' 这条路由，当页面不变更只动态的改变参数id时，beforeRouteUpdate便会触发
  beforeRouteUpdate (to, from, next) {
   ...
  }
};

路由复用

1.在需要复用的组件内给 router-view 进行赋值，实现路由的简单复用

1
2
<router-view name="OrderingGuide"></router-view>
<router-view name="Delivery"></router-view>

2.在展示组件的路由内配置

1
2
3
4
5
6
7
8
9
10
11
12
13
export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      //组件复用
      components: {
        default: Home,
        'OrderingGuide': OrderingGuide,
        'Delivery': Delivery,
      },
    },
})

控制滚动行为

      vue-router 可以让我们控制页面展示的位置。需要注意：这个功能只在支持 history.pushState 的浏览器中可用。

跳转到指定位置

1
2
3
4
5
6
export default new Router({
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    return {x: 0,y: 100};
  }
})

      scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

跳转到某个选择器

1
2
3
4
5
6
export default new Router({
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    return {selector: '.btn',};
  }
})

滚动到指定滚动到锚点

1
2
3
4
5
6
export default new Router({
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    return {selector: to.hash};
  }
})

返回到之前阅读的位置

1
2
3
4
5
6
7
8
9
10
export default new Router({
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return { x: 0, y: 0 };
    }
  }
})

      以上具体代码可以到这里查阅。

Copyright ©2019 guowj All Rights Reserved.

访客数 : | 访问量 :