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.

访客数 : | 访问量 :