前端学习之：vue2 和 vue3 router 安装； vue2 的路由配置及使用；路由守卫

vue2 和 vue3 的VueRouter 安装和使用

安装

# vue2对应版本
npm i vue-router@3

# vue3对应版本
npm i vue-router@4

1
2
3
4
5
6

引用

路由配置

import VueRouter from 'vue-router'
import LoginPage from '../views/LoginPage'
import ForgetPassword from '../views/ForgetPassword'
import SetNewPassword from '../views/SetNewPassword'
import ResetSuccess from '../views/ResetSuccess'
import HomePage from '../views/HomePage'

export default new VueRouter({
    mode: 'history',
    routes: [{
            path: '/login',
            component: LoginPage,
            // children: [{
            //     path: 'forget',
            //     component: ForgetPassword,
            // }]
        },


        {
            path: '/forget',
            component: ForgetPassword
        },

        {
            path: '/reset',
            component: SetNewPassword
        },

        {
            path: '/success',
            component: ResetSuccess
        },
        {
            path: '/home',
            component: HomePage
        }


    ]
})
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
37
38
39
40
41

路由使用

1. router-link + router view

<template>
  <div id="app">
  	    
    <div>
      <router-link to="/login">router-link>
      <router-link to="/reset">reset passwordrouter-link>
      <router-link to="/home">Homerouter-link>
    div>
    
    <div>
      <router-view>router-view>
    div>
    
  div>
template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

路由参数传递和获取

传参

  <router-link :to="{path:'/login', query:{id:1，name:'vue'}}">
   router-link>
1
2
3

参数获取

 id = this.$route.query.id
1

跳转页面的时候在新窗口打开

  <router-link :to="{path:'/login', query:{id:1，name:'vue'}}" target="_blank">
  router-link>
1
2

2. 编程式路由

• 上面的 router-link 本质上相当于一个 标签，因此其作用范围非常小，如果把他放在一个 button 中，那么这个 button 只有一小部分区域是有用的。因此如果我们想将路由功能封装在某个 button 或者其他标签中，就需要使用编程式的路由方法

定义函数，在函数中封装路由跳转的操作

this.$router.push()

• 可以在 button 标签中定义一个点击事件（@click=“toLogin”)

<template>
	<button 
        @click="toLogin"
        >Login
    button>
template>
1
2
3
4
5
6

methods:{
	// 通过这种方式
	toLogin () {
		   this.$router.push({path: "/login", query: {id: 'abc'}})
		 }
}

 // 参数获取
 id = this.$route.query.id
1
2
3
4
5
6
7
8
9

• push 方式进行路由跳转可以进行按照访问的先后顺序进行回退

this.$router.replace()

<template>
	<button 
        @click="toLogin"
        >Login
    button>
template>
1
2
3
4
5
6

methods:{
	// 通过这种方式
	toLogin () {
		   this.$router.replace({path: "/login", query: {id: 'abc'}})
		 }
}

 // 参数获取
 id = this.$route.query.id
1
2
3
4
5
6
7
8
9

• push 方式进行路由跳转每一次都会覆盖上一次的路由操作，因此不能回访之前的页面

参考链接

https://www.cnblogs.com/fps2tao/p/12049526.html

路由守卫

• 作用是保证用户必须满足一定的条件才能访问目标页面
• 一定要注意 next() 不要忘记写，否则无法进行跳转，会阻塞住

1. 全局路由守卫

全局前置路由守卫（router.beforeEach)

• 通过在路由的文件中使用 beforeEach() 来设置 全局前置路由守卫 即对路由文件下所有的路由都有限制作用
  

• 另外一种方式是，在每个路由配置项中的 meta 字段 中配置路由想要守卫的内容：
  

• 比如上面的两个路由配置中 meta 中都创建了 isAuth 字段，并设置了 true；因此我们可以在全局路由的前置守卫这里把 isAuth 当做守卫条件。如果满足这个条件则可以实现跳转。
  

全局后置路由守卫 (router.afterEach)

• 比如下面的后置路由守卫做的事情是保证每次页面跳转之后，标签的 title 都会随之更新
  

2. 独享路由守卫 (beforeEnter)

• 在一个路由配置信息中进行配置
• 独享路由守卫只有前置没有后置
• 但是独享路由守卫可以和全局后置路由守卫配合使用
  
  

3. 组件内路由守卫

beforeRouteEnter

beforeRouteLeave

• 完全不同于后置路由守卫，完全两码事；只有全局的路由守卫才有前置和后置的概念。独享路由守卫或者组件中是没有后置路由守卫概念的。