学习概述
- 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即可```
#### 路由代码跳转
有时候, 页面的跳转可能需要执行对应的JavaScript代码, 这个时候, 就可以使用第二种跳转方式了，也就是编程式导航。
例如，我们需要点击按钮然后进行跳转
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 的值，从而展示对应的用户详情
User组件 ------- {{this.$route.params.id}}
我们也可以在主组件 App.vue 中获取到路由参数
用户
#### 使用props接收路由参数
为了**简化路由参数的获取形式**，vue-router 允许在 路由规则中开启 props 传参 。
1.我们在 src/router/index.js 中配置路由定义路由规则时，声明 `props: true` 选项```
{path: '/user/:id',component: User,props: true
}
2.在 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>
3.在主组件 App.vue 中也可以获取到路由参数
<router-link v-bind:to=" '/user' + id ">用户</router-link>
传递参数的方式 传递参数主要有两种类型: params 和 query
1、params的类型
配置路由格式: /router/:id* 传递的方式: 在path后面跟上对应的值* 传递后形成的路径: /router/123, /router/abc2、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>标签.
- 我们创建好 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等
导航守卫
网页标题是通过来显示的, 但是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 跳转到 towindow.document.title = to.meta.titlenext()
})
// 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函数的三种调用方式
<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a3454e1b75c94c948027e9e7b2153217~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.awebp?" style="margin: auto" />
* 当前用户拥有后台主页的访问权限，直接放行： `next()`* 当前用户没有后台主页的访问权限，强制其跳转到登录页面：`next('/login')`* 当前用户没有后台主页的访问权限，不允许跳转到后台主页：`next(false)`### 路由过渡动画
首先是这个网课找了很多，最近的都是没有怎么讲路由过渡动画的，通过看官网和看博客，了解了这个玩意儿，感觉挺好用的，是页面转换更加的丝滑。
> vue router 切换动画,多个页面跳转太过于生硬，想要在页面跳转间加入一些过渡效果
> `<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 切换。
1.v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2.v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3.v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4.v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5.v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6.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…
最后
最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享