Vue的路由导航

归途风景111

已于 2022-01-31 16:36:57 修改

阅读量4.1k

点赞数 2

分类专栏：面试 vue 文章标签： vue.js javascript 前端

于 2022-01-12 19:03:10 首次发布

本文链接：https://blog.csdn.net/weixin_58032613/article/details/122457030

版权

面试同时被 2 个专栏收录

59 篇文章 8 订阅

订阅专栏

vue

54 篇文章 4 订阅

订阅专栏

一、要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题

二、vue-router是什么

这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。路由模块的本质就是建立起url和页面之间的映射关系。
至于我们为啥不能用a标签，这是因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的a标签是不起作用的，你必须使用vue-router来进行管理。
这里解释一下什么是SPA（单页应用）德路径管理器：SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面。

三、vue-router实现原理

vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。

1、Hash模式：

vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL，于是当 URL 改变时，页面不会重新加载。 hash（#）是URL 的锚点，代表的是网页中的一个位置，单单改变#后的部分，浏览器只会滚动到相应位置，不会重新加载网页，也就是说 #是用来指导浏览器动作的，对服务器端完全无用，HTTP请求中也不会不包括#；同时每一次改变#后的部分，都会在浏览器的访问历史中增加一个记录，使用”后退”按钮，就可以回到上一个位置；所以说Hash模式通过锚点值的改变，根据不同的值，渲染指定DOM位置的不同数据
（简单来说就是：Hash即地址栏URL中的 # 符号 hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。）

2、History模式：

由于hash模式会在url中自带#，如果不想要很丑的 hash，我们可以用路由的 history 模式，只需要在配置路由规则时，加入"mode: ‘history’",这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。

//main.js文件中
const router = new VueRouter({
 mode: 'history',
 routes: [...]

当你使用 history 模式时，URL 就像正常的 url，例如 http://yoursite.com/user/id，比较好看！
不过这种模式要玩好，还需要后台配置支持。因为我们的应用是个单页客户端应用，如果后台没有正确的配置，当用户在浏览器直接访问 http://oursite.com/user/id 就会返回 404，这就不好看了。
所以呢，你要在服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面，这个页面就是你 app 依赖的页面。

 export const routes = [ 
  {path: "/", name: "homeLink", component:Home}
  {path: "/register", name: "registerLink", component: Register},
  {path: "/login", name: "loginLink", component: Login},
  {path: "*", redirect: "/"}]

此处就设置如果URL输入错误或者是URL 匹配不到任何静态资源，就自动跳到到Home页面

简单来说就是：我们经常使用的是History模式前端的URL必须和实际向后端发起请求的URL一致如果后端缺少对路由处理，将返回404错误

3、使用路由模块来实现页面跳转的方式

方式1：直接修改地址栏

方式2：this.$router.push(‘路由地址’)

方式3：<router-link to="路由地址"></router-link>

四、vue-router使用方式

1、下载 npm i vue-router -S

2、在main.js中引入 import VueRouter from ‘vue-router’;

3、安装插件 Vue.use(VueRouter);

4、创建路由对象并配置路由规则

let router = new VueRouter({routes:[{path:’/home’,component:Home}]});

5、将其路由对象传递给Vue的实例，options中加入 router:router

6、在app.vue中留坑

具体实现请看如下代码：

//main.js文件中引入
import Vue from 'vue';
import VueRouter from 'vue-router';
//主体
import App from './components/app.vue';
import Home from './components/home.vue'
//安装插件
Vue.use(VueRouter); //挂载属性
//创建路由对象并配置路由规则
let router = new VueRouter({
    routes: [
        //一个个对象
        { path: '/home', component: Home }
    ]
});
//new Vue 启动
new Vue({
    el: '#app',
    //让vue知道我们的路由规则
    router: router, //可以简写router
    render: c => c(App),
})

最后记得在在app.vue中“留坑”

//app.vue中
<template>
    <div>
        <!-- 留坑，非常重要 -->
        <router-view></router-view>
    </div>
</template>
<script>
    export default {
        data(){
            return {}
        }
    }
</script>

五、路由传参

路由传参有三种方式：

分别是query，params，动态路由传参

接收方式：

通过query方式传递过来的参数一般是通过this.$route.query接收
通过params方式传递过来的参数一般是通过this.$route.params接收
通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收

六、路由导航守卫

路由导航守卫分三种

分别是：全局路由守卫、路由独享守卫、组件级的路由守卫

全局前置守卫 router.beforeEach 进入路由之前
全局解析守卫 router.beforeResolve
全局后置守卫 router.afterEach 进入路由之后就没有next参数

全局前置守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

每个守卫都有三个参数：

to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 钩子函数，里面定义参数，确认下一步路由要做什么
next(’/’)或者 next({ path: ‘/’ }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向 next 传递任意位置对象，next({name: ‘home’}) 。

一般应用在用户未能验证身份时重定向到 /login ：

//全局前置守卫
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
  else next()
})

全局解析守卫

在 2.5.0+ 你可以用 router.beforeResolve 注册一个全局守卫。这和 router.beforeEach 类似，区别是在导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

全局后置钩子

守卫不同的是，后置钩子不会接受 next 函数也不会改变导航本身：

//全局后置钩子函数
router.afterEach((to, from) => {
  // ...
})

路由独享守卫

你可以在路由配置上直接定义 beforeEnter 守卫：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      //路由独享守卫
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

路由独享守卫与路由全局前置守卫用法一样都有三个参数（to，from，next）

组件内的守卫

可以在路由组件内直接定义以下路由导航守卫：

进入组件前的守卫 beforeRouteEnter
路由更新时的守卫 beforeRouteUpdate (2.2 新增)
离开组件时的守卫 beforeRouteLeave
下面请看代码实例：

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
    // 不能获取组件实例 `this`
    // 因为当守卫执行前，组件实例还没被创建
  },
  beforeRouteUpdate(to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
    // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
    // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
    // 可以访问组件实例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }
}

beforeRouteEnter 守卫不能访问 this，因为守卫在导航确认前被调用，因此即将登场的新组件还没被创建。
不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
下面请看代码实例：

beforeRouteEnter (to, from, next) {
  next(vm => {
  vm.$store.state.token
    // 通过 `vm` 访问组件实例
  })
}

注意 beforeRouteEnter 是支持给 next传递回调的唯一守卫。对于 beforeRouteUpdate和beforeRouteLeave 来说，this 已经可用了，所以不支持传递回调，因为没有必要了。
下面请看代码实例：

beforeRouteUpdate (to, from, next) {
  // just use `this`
  this.name = to.params.name
  next()
}

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。
下面请看代码实例：

beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

最后再说一下完整的导航解析流程：
1、导航被触发。
2、在失活的组件里调用 beforeRouteLeave 守卫。
3、调用全局的 beforeEach 守卫。
4、在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5、在路由配置里调用 beforeEnter。
6、解析异步路由组件。
7、在被激活的组件里调用 beforeRouteEnter。
8、调用全局的 beforeResolve 守卫 (2.5+)。
9、导航被确认。
10、调用全局的 afterEach 钩子。
11、触发 DOM 更新。
12、调用 beforeRouteEnter 守卫中传给 next 的回调函数，创建好的组件实例会作为回调函数的参数传入。

理论：

路由原理

路由分为History模式和Hash模式我们经常使用的是History模式前端的URL必须和实际向后端发起请求的URL一致如果后端缺少对路由处理，将返回404错误
Hash即地址栏URL中的 # 符号 hash虽然出现在URL中，但不会被包括在HTTP请求中，对后端完全没有影响，因此改变hash不会重新加载页面。

路由传参：

三种：
分别是query，params，动态路由传参
接收：
通过query方式传递过来的参数一般是通过this.$route.query接收
通过params方式传递过来的参数一般是通过this.$route.params接收
通过动态路由传参方式传递过来的参数一般是通过this.$route.params接收
路由守卫：

2.路由守卫使用的方式有几种？

全局的单个路由独享的组件级的

3.vue-router全局有三个守卫：

router.beforeEach 全局前置守卫进入路由之前
router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用 router.afterEach 全局后置钩子进入路由之后没有next

组件内的守卫：

进组组件前的守卫 beforeRouteEnter 没有办法获取this，当前组件没有创建
路由更新时的守卫 beforeRouteUpdata(2.2新增)
离开组件时的守卫 beforeRouteLeave

3. 路由守卫钩子函数里面的三个参数分别是什么？

to,from,next 这三个参数：
to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。
next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。
next() 进入该路由。
next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。 next 跳转新路由，当前的导航被中断，重新开始一个新的导航。

路由跳转方式一共四种方式

router-link (不带参数)
this.$router.push() (函数里面调用)
this.$router.replace() (用法同push)
this.$router.go(n)

归途风景111

关注

2
点赞
踩
14

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue的路由导航

一、要学习vue-router就要先知道这里的路由是什么？为什么我们不能像原来一样直接用标签编写链接哪？vue-router如何使用？常见路由操作有哪些？等等这些问题，就是本篇要探讨的主要问题二、vue-router是什么这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是WebApp的链接路径管理系统。vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是
复制链接

扫一扫