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

暖仔会飞

已于 2022-09-10 14:52:55 修改

阅读量698

点赞数

分类专栏：软件工程学习内容文章标签：前端学习 vue.js

于 2022-09-10 12:18:12 首次发布

本文链接：https://blog.csdn.net/qq_42902997/article/details/126795445

版权

软件工程学习内容专栏收录该内容

55 篇文章 22 订阅

订阅专栏

vue2 和 vue3 的VueRouter 安装和使用

安装

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

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

引用

路由配置

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. router-link + router view

<template>
  <div id="app">
  	    <!-- 使用 router link-->
    <div>
      <router-link to="/login"></router-link>
      <router-link to="/reset">reset password</router-link>
      <router-link to="/home">Home</router-link>
    </div>
    <!-- router view 展示路由跳转的页面 -->
    <div>
      <router-view></router-view>
    </div>
    
  </div>
</template>

路由参数传递和获取

传参

<!-- 添加路由参数 -->
  <router-link :to="{path:'/login', query:{id:1，name:'vue'}}">
   </router-link>

参数获取

 id = this.$route.query.id

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

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

2. 编程式路由

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

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

this.$router.push()

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

<template>
	<button 
        @click="toLogin"
        >Login
    </button>
</template>

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

 // 参数获取
 id = this.$route.query.id

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

this.$router.replace()

<template>
	<button 
        @click="toLogin"
        >Login
    </button>
</template>

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

 // 参数获取
 id = this.$route.query.id

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

参考链接

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

路由守卫

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

1. 全局路由守卫

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

通过在路由的文件中使用 beforeEach() 来设置 全局前置路由守卫 即对路由文件下所有的路由都有限制作用
另外一种方式是，在每个路由配置项中的 meta 字段 中配置路由想要守卫的内容：
比如上面的两个路由配置中 meta 中都创建了 isAuth 字段，并设置了 true；因此我们可以在全局路由的前置守卫这里把 isAuth 当做守卫条件。如果满足这个条件则可以实现跳转。