Vue-router小结

站长

2022年11月11日 17:50 · 阅读数 58

学习概述

Vue-router之前就是学过了，也是会基本的使用，但是感觉太久没有怎么用了不熟练了，有些细节也是忘记了。
前几天用了，主要是用this.$router.push() 方法和<router-link>,然后再router的index.js里面有些路由有些地方也是没有写好。只是能够简单地用，有些做法没有考虑清楚。今天有机会重新学习一下，就是要好好捡起之前的记忆。学习的知识如下:

Vue-router 概述

声明式导航&编程式导航

在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击 <a> 链接，vue 项目中点击 <router-link> 都属于声明式导航
在浏览器中，调用API方法实现导航的方式，叫做编程式导航。例如：普通网页中调用 location.href 跳转到新页面的方式，属于编程式导航

编程式导航API

vue-router 提供了许多编程式导航的API，其中最常用的导航 API 分别是：

this.$router.push('hash地址') 跳转到指定 hash 地址，并增加一条历史记录
this.$router.replace('hash地址') 跳转到指定的 hash 地址，并替换掉当前的历史记录
this.$router.go(数值n) 实现导航历史前进、后退

$router.push

通过 this.$router.push() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。示例代码如下

<template>
  <div>
      <h3>Home组件</h3>
      <button @click="gotoMovie"> 跳转到Movie页面</button>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
      gotoMovie() {
          this.$router.push('/movie')
      }
  }
}
</script>

<style scoped>

</style>

$router.replace

调用 this.$router.replace() 方法，可以跳转到指定的 hash 地址，从而展示对应的组件页面。

push 和 replace 的区别：

push 会增加一条历史记录
replace 不会增加历史记录，而是替换掉当前的历史记录

$router.go

调用 this.$router.go() 方法，可以在浏览历史中前进和后退，示例代码如下：

<template>
  <div>
      <h3>Home组件</h3>
      <button @click="goBack"> 后退 </button>
  </div>
</template>

<script>
export default {
  name: "Home",
  methods: {
      goBack(){
          // 后退到之前的组件页面
          this.$router.go(-1)
      }
  }
}
</script>

<style scoped>

</style>
// 注意，一般只会前进和后退一层页面，因此 vue-router 提供了如下两个便捷方法：

1.  `$router.back()`

    -   在历史记录中， 后退到上一个页面

2.  `$router.forward()`

    -   在历史记录中， 前进到下一个页面

认识vue-router

目前前端流行的三大框架, 都有自己的路由实现: Angular的ngRouter React的ReactRouter Vue的vue-router 我们的重点是vue-router，vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。我们可以访问其官方网站对其进行学习：router.vuejs.org/zh/

vue-router是基于路由和组件的

路由用于设定访问路径, 将路径和组件映射起来
在vue-router的单页面应用中, 页面的路径的改变就是组件的切换

使用 vue-router 的步骤

1.  创建路由组件
2.  配置路由映射：组件和路径映射关系
3.  使用路由: 通过`<router-link>`和`<router-view>` 声明路由链接和占位符

在 src 源代码目录下，新建 router/index.js 路由模块，并初始化如下的代码：

如果我们在使用 vueCLI 初始化项目的时候安装了 router，那么就会自动生成 router 文件夹，里面有 index.js 如下

// 1.导入 Vue 和 VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'

// 2.调用 Vue.use() 函数,把 VueRouter 安装为 Vue 的插件
Vue.use(VueRouter)

// 3.创建 VueRouter 对象
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webp ackChunkName: "about" */ '../views/About.vue')
  }
]

const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes
})
// 4.将 router 对象传入到 vue 实例
export default router

在 src/ main.js 入口文件中，导入并挂载路由模块。示例代码如下：

import Vue from 'vue'
import App from './App.vue'
// 1.导入路由模块
import router from './router'

Vue.config.productionTip = false

new Vue({
  // 2.挂载路由模块
  router,
  render: h => h(App)
}).$mount('#app')

在 src/ main.js 入口文件中，导入并挂载路由模块。示例代码如下：

import Vue from 'vue'
import App from './App.vue'
// 1.导入路由模块
import router from './router'

Vue.config.productionTip = false

new Vue({
  // 2.挂载路由模块
  router,
  render: h => h(App)
}).$mount('#app')

在App.vue 主组件中使用路由

<router-link> 声明路由链接
<router-view> 占位符

声明路由匹配规则

在 src/router/index.js 路由模块中，通过 routes 数组声明路由的匹配规则。示例代码如下：

const routes = [			// 在 routes 数组中,声明路由的匹配规则
  {	
    // path 表示要匹配的 hash 地址,component 表示要展示的路由组件  
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // 这种方式是路由懒加载,后面有解释  
    component: () => import(/* webp ackChunkName: "about" */ '../views/About.vue')
  }
]

router-link补充

在前面的 <router-link> 中,我们只是使用了一个属性：to ，用于指定跳转的路径
<router-link>还有一些其他属性

tag : tag可以指定<router-link>之后渲染成什么组件，比如下面的代码会被渲染成一个 <li> 元素,而不是 <a>

<router-link to='/home' tag='li'>

replace ： replace 不会留下 history 记录，所以指定 replace 的情况下，后退键返回不能返回到上一个页面中
active-class ：当对应的路由匹配成功时,会自动给当前元素设置一个 router-link-active 的 class，设置 active-class 可以修改默认的名称(一般不需要改)
在进行高亮显示的导航菜单或者底部tabbar时, 会使用到该类
但是通常不会修改类的属性, 会直接使用默认的router-link-active即可

    <template>
  <div id="app">
    <div id="nav">
      <!-- 1.定义路由链接 -->  
      <router-link to="/" tag='li' replace >Home</router-link> 
      <router-link to="/about">About</router-link>
    </div>
    <!--  2.定义路由的占位符 -->  
    <router-view></router-view>
  </div>
</template>


<script>
export default {
    name: 'App',
}
</script>


<style>
.router-link-active {
    color: red
}

</style>

路由代码跳转

有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了，也就是编程式导航。

例如，我们需要点击按钮然后进行跳转

    <template>
  <div id="app">
    <div id="nav">
        <button @click="homeClick">首页</button>
        <button @click="aboutClick">关于</button> 
    </button>
    </div>
    <!--  2.定义路由的占位符 -->  
    <router-view></router-view>
  </div>
</template>

<script>
export default {
    name: 'App',
    methods: {
        homeClick(){
            this.$router.push('/home')
        },
        aboutClick(){
            this.$router.push('/about')
        }
    }
}
</script>

Vue-router的常见用法

路由重定向

路由重定向指的是：用户在访问地址 A 的时候，强制用户跳转到地址 C ，从而展示特定的组件页面。

通过路由规则的 redirect 属性，指定一个新的路由地址，可以很方便地设置路由的重定向：

const router = new VueRouter({
    // 在 routes 数组中,声明路由的匹配规则
    routes: [
        // 当用户访问 / 的时候,通过 redirect 属性跳转到 /home 对应的路由规则
        {
            path: '/',
            redirect: '/home'
        }
    ]
})

路由的懒加载

首先, 我们知道路由中通常会定义很多不同的页面.
这个页面最后被打包在哪里呢? 一般情况下, 是放在一个js文件中.
但是, 页面这么多放在一个js文件中, 必然会造成这个页面非常的大
如果我们一次性从服务器请求下来这个页面, 可能需要花费一定的时间, 甚至用户的电脑上还出现了短暂空白的情况。

如何避免这种情况呢? 使用路由懒加载就可以了路由懒加载做了什么？

路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块.
只有在这个路由被访问到的时候, 才加载对应的组件

懒加载的方式

在ES6中, 我们可以有更加简单的写法来组织Vue异步组件和Webpack的代码分割 const Home = () => import('../components/Home.vue')

例如：

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

// 原始路由加载
// import Home from '../components/Home'
// 路由懒加载(推荐)
const Home = () => imports('../components/Home')

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

const routes = [			// 在 routes 数组中,声明路由的匹配规则
  {	
    // path 表示要匹配的 hash 地址,component 表示要展示的路由组件  
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]

const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

// 3.将router对象传入到Vue实例
export default router

动态路由

动态路由指的是：把 Hash 地址中可变的部分定义为参数项，从而提高路由规则的复用性。
在某些情况下，一个页面的path路径可能是不确定的，比如我们进入用户界面时，希望是如下的路径
/user/aaaa 或 /user/id
除了有前面的 /user 之外，后面还跟上了用户的 ID
这种 path 和 Component 的匹配关系，我们称之为动态路由(也是路由传递数据的一种方式)

我们在 src/router/index.js 中配置路由

使用英文的冒号 (: ) 来定义路由的参数项

{
    path: '/user/:id',
    component: User
}

在 User.vue 组件中,可以获取到 id 的值，从而展示对应的用户详情

<template>
  <div class='User-container'>
    <h2>User组件 ------- {{this.$route.params.id}}</h2>
  </div>
</template>

<script>
export default {
  name: "User"
}
</script>

<style scoped>

</style>

我们也可以在主组件 App.vue 中获取到路由参数

<router-link v-bind:to=" '/user' + id ">用户</router-link>

使用props接收路由参数

为了简化路由参数的获取形式，vue-router 允许在路由规则中开启 props 传参。

我们在 src/router/index.js 中配置路由

定义路由规则时，声明 props: true 选项

{
    path: '/user/:id',
    component: User,
    props: true
}

在 User.vue 组件中,可以获取到 id 的值，从而展示对应的用户详情

<template>
  <div class='User-container'>
    <!-- 2.直接使用 props 中接收的路由参数 -->  
    <h2>User组件 ------- {{id}}</h2>
  </div>
</template>

<script>
export default {
  name: "User",
  props: ['id']			// 1.使用 props 接收路由规则中匹配到的参数项
}
</script>

<style scoped>

</style>

在主组件 App.vue 中也可以获取到路由参数

<router-link v-bind:to=" '/user' + id ">用户</router-link>

传递参数的方式传递参数主要有两种类型: params 和 query

1、params的类型

配置路由格式: /router/:id
传递的方式: 在path后面跟上对应的值
传递后形成的路径: /router/123, /router/abc

2、query的类型配置路由格式: /router, 也就是普通配置

传递的方式: 对象中使用query的key作为传递方式
传递后形成的路径: /router?id=123, /router?id=abc
例如我们在 App.vue 里面向其他路由 ‘/profile’ 传递对象参数

例如我们在 App.vue 里面向其他路由 ‘/profile’ 传递对象参数

<router-link :to ="{
                   path:'/profile', 
                   query:{name: 'why',age: 18,height:1.88}}">
				</router-link>

在 Profile.vue 组件里面也可以取到传递过来的参数

<template>
  <div>
      <h2>我是 Profile 组件</h2>
      <h2>{{this.$route.query}}</h2>
       <h2>{{this.$route.query.name}}</h2>
       <h2>{{this.$route.query.age}}</h2>
       <h2>{{this.$route.query.height}}</h2>
  </div>
</template>

<script>
export default {
  name: "Profile"
}
</script>

<style scoped>

</style>

嵌套路由

嵌套路由是一个很常见的功能，比如在home页面中, 我们希望通过 /home/news 和 /home/message 访问一些内容，

一个路径映射一个组件, 访问这两个路径也会分别渲染两个组件

实现嵌套路由有两个步骤：

创建对应的子组件, 并且在路由映射中配置对应的子路由.，使用 children 属性声明子路由规则在组件内部使用<router-view>标签.

Vue-router小结

我们创建好 HomeNews.vue 和 HomeMessage.vue 后，在 src/router/index.js 中配置路由映射

// 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'


// 路由懒加载(推荐)
const Home = () => imports('../components/Home')
const HomeNews = () => imports('../components/HomeNews')
const HomeMessage = () => imports('../components/HomeMessage')

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

const routes = [			
  {	
    // Home 页面的路由规则(父级路由规则)
    path: '/home',
    name: 'Home',
    component: Home,
    // 通过 children 属性,嵌套声明子级路由规则  
    children: [
        {
           // 默认路径
           path: '',
           redirect: 'news'
        }，
        {
            path: 'news',
            component: HomeNews
        },
        {
            path: 'messages',
            component: HomeMessage
        }
    ]
  },

]

const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
  linkActiveClass: 'active'
})

// 3.将router对象传入到Vue实例
export default router

由于我们的 HomeNews.vue 和 HomeMessage.vue 都是 Home 路由的子路由，所以我们需要在 Home.vue 进行显示

<template>
  <div>
    <h2>Home 组件</h2>
    <!--  1.在 Home 组件中,声明两个子路由链接 -->
    <router-link to="/home/news">新闻</router-link>
    <router-link to="/home/message">消息</router-link>
      
    <!--  2.在关于页面中,声明子路由的占位符  -->  
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'Home',
}
</script>

<style>
    
</style>

`$router`和`$route`的区别

$router 为VueRouter实例，想要导航到不同URL，则使用$router.push方法
$route为当前 router 跳转对象里面可以获取name、path、query、params等

导航守卫

Vue-router小结我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?

网页标题是通过来显示的, 但是SPA只有一个固定的HTML, 切换不同的页面时, 标题并不会改变.
但是我们可以通过JavaScript来修改的内容 window.document.title = '新的标题'

那么在Vue项目中, 在哪里修改? 什么时候修改比较合适呢?

普通的修改方式:
我们比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中.
通过mounted声明周期函数, 执行对应的代码进行修改即可.
但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).
有没有更好的办法呢? 使用导航守卫即可.

什么是导航守卫?

vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.
vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发

    // 配置路由相关的信息
import VueRouter from 'vue-router'
import Vue from 'vue'

import Home from '../components/Home'
import About from '../components/About'
import User from "../components/User";

// 1.通过Vue.use(插件), 安装插件
Vue.use(VueRouter)

// 2.创建VueRouter对象
const routes = [
  {
    path: '',
    // redirect重定向
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home,
    meta: {
        title: '首页'
    }
  },
  {
    path: '/about',
    component: About,
    meta: {
        title: '关于'
    }
  },
]
const router = new VueRouter({
  // 配置路由和组件之间的应用关系
  routes,
  mode: 'history',
})

// 前置钩子hook(前置回调)
router.beforeEach((to,form,next) => {
    // 从 from 跳转到 to
    window.document.title = to.meta.title
    next()
})

// 3.将router对象传入到Vue实例
export default router

全局前置守卫

每次发生路由的导航跳转时，都会触发全局前置守卫。因此，在全局前置守卫中，程序员可以对每个路由进行访问权限的控制：

    const router = new VueRouter({
  routes,
})

// 调用路由实例对象的 beforeEach 方法,即可声明"全局前置守卫"
// 每次发生路由跳转的时候,都会触发这个方法
// 全局前置守卫
router.beforeEach((to,from,next)=> {
    // to 是将要访问的路由的信息对象
    // from 是将要离开的路由的信息对象
    // next 是一个函数,调用 next()表示放行,允许这次路由导航
})

导航钩子的三个参数解析

to ：即将要进入的目标的路由对象
from：当前导航即将要离开的路由对象
next：调用该方法后，才能进入下一个钩子

注意：如果是前置钩子beforeEach，必须要调用 next() 函数，如果是后置钩子afterEach，不需要主动调用 next() 函数

4.2、next函数的三种调用方式

Vue-router小结

当前用户拥有后台主页的访问权限，直接放行： next()
当前用户没有后台主页的访问权限，强制其跳转到登录页面：next('/login')
当前用户没有后台主页的访问权限，不允许跳转到后台主页：next(false)

路由过渡动画

首先是这个网课找了很多，最近的都是没有怎么讲路由过渡动画的，通过看官网和看博客，了解了这个玩意儿，感觉挺好用的，是页面转换更加的丝滑。

vue router 切换动画,多个页面跳转太过于生硬，想要在页面跳转间加入一些过渡效果

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

<transition>
 <router-view></router-view>
</transition>

在旧版本的 Vue 路由中，我们可以简单地用 <transition> 组件包装 <router-view>。

但是，在较新版本的 Vue 路由中则必须用 v-slot 来解构 props 并将它们传递到我们的内部 slot 中。这将包含一个动态组件，该组件被过渡组件包围。

    <router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

过渡阶段的类名

对于这些在过渡中切换的类名来说中，如果你使用一个没有名字的 <transition>，则 v- 是这些类名的默认前缀。如果你使用了 <transition name="my-transition">，那么 v-enter 会替换为 my-transition-enter。

在进入/离开的过渡中，会有 6 个 class 切换。

Vue-router小结

v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
v-enter-to: 2.1.8版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
v-leave-to: 2.1.8版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。

transition属性

name - string，用于自动生成 CSS 过渡类名。例如：name: 'fade' 将自动拓展为.fade-enter，.fade-enter-active等。默认类名为 "v"
appear - boolean，是否在初始渲染时使用过渡。默认为 false。
css - boolean，是否使用 CSS 过渡类。默认为 true。如果设置为 false，将只通过组件事件触发注册的 JavaScript 钩子。
type - string，指定过渡事件类型，侦听过渡何时结束。有效值为 "transition" 和 "animation"。默认 Vue.js 将自动检测出持续时间长的为过渡事件类型。
mode - string，控制离开/进入过渡的时间序列。有效的模式有 "out-in" 和 "in-out"；默认同时进行。
duration - number | { enter: number, leave: number } 指定过渡的持续时间。默认情况下，Vue 会等待过渡所在根元素的第一个 transitionend 或 animationend 事件。 过渡模式mode：

1.in-out:新元素先进入过渡，完成之后当前元素过渡离开。

2.out-in:当前元素先进行过渡离开，离开完成后新元素过渡进入。

talk is cheap ，show me the code

    <template>
  <div id="app">
    <transition name="slide-left" mode="out-in">
      <router-view />
    </transition>
  </div>
</template>
<style>
.slide-left-enter {
    opacity: 0;
    -webkit-transform: translate(30px, 0);
    transform: translate(30px, 0);
  }
  .slide-left-enter-active{
    transition: all .5s ease;
  }
  .slide-left-leave-to{
    opacity: 0;
    -webkit-transform: translate(-30px, 0);
    transform: translate(-30px, 0);
  }
  .slide-left-leave-active {
    transition: all .5s ease;
  }
</style>

下面是一个大佬具体的四个路由过渡动画

- 渐变动画
- 幻灯片过渡
- 缩放过渡
- 组合过渡

四个路由过渡动画链接：juejin.cn/post/696320…

转载自:https://juejin.cn/post/7144386827095375879

Vue-router小结

学习概述

Vue-router 概述

声明式导航&编程式导航

编程式导航API

$router.push

$router.replace

$router.go

认识vue-router

使用 vue-router 的步骤

声明路由匹配规则

router-link补充

路由代码跳转

Vue-router的常见用法

路由重定向

路由的懒加载

懒加载的方式

动态路由

使用props接收路由参数

嵌套路由

$router和$route的区别

导航守卫

全局前置守卫

导航钩子的三个参数解析

路由过渡动画

过渡阶段的类名

transition属性

`$router`和`$route`的区别