vue中的路由

路由简介

说的简单一点就是处理页面的跳转。在早期非前后端分离的项目中,页面的跳转是通过后台来实现的,使用前后端分离之后,此时页面的跳转是由前台实现的。一个项目会写很多页面,这些页面中或多或少都有重复的内容,前台每次进行页面跳转的时候都会向后台请求相应的html、css、js文件。这就好比是我们去超市买东西,每次只买一件东西,分多次购买,每次购买后都要排队结账,这样就有点耗时了,一般情况下我们去超市都是一次性的买全,然后排一次队结账即可,如此就节省了排队的时间。再回到技术上,对应着一次性买全的操作就相当于是一次性把前端代码响应到客户端,由此就产生了一个新的技术SPA(single page application)单页面应用,整个项目就只有一个页面,在用户进行页面跳转的时候,通过路由来切换到相应的组件上。

spa的优点:

  • 用户体验高,切换页面的时候不进行刷新
  • 减轻后端服务器的压力
  • 更清晰的前后端分离

spa的缺点:

  • 一次性将文件都发送给前端,导致首次加载时间长
  • seo难度高

vue官方提供了vue router来处理前端路由。

在vue项目根目录下执行安装命令:

npm i vue-router

在创建vue项目的时候,可以勾选上router,这样创建出来的项目中就已经包含了router相关内容了。建好项目之后会有一个router文件夹,在该文件下的index.js中就可以编写路由相关的代码了。views目录下存放路由页面的组件。在vue中,每个页面其实就是由多个组件来构成的。

创建路由的步骤:

  • 1.创建路由组件,在views目录下进行创建
  • 2.配置路由映射,组件和路径映射关系,在router的index.js中编写
  • 3.使用路由,在app.vue中通过标签来使用

其实在上面创建好的vue项目中已经有一些路由的代码示例了,这里我们自己再创建一个路由。

首先,创建一个路由组件video.vue

<template>
    <ul>
        <li>欧美</li>
        <li>日韩</li>
        <li>国语对白</li>
    </ul>
</template>

<script>
    
    //导出当前组件
    export default {
        name: "Video"
    }
</script>

<style scoped>

</style>

其次,配置路由映射在index.js中先导入上面的组件,然后再配置

导入

import Video from '../views/Video'

在routes中添加

{
    path: '/video',//路径,在router-link中使用
    name: 'Video',//名字
    component: Video//对应的组件
}

最后,可以在App.vue中使用路由了,这里填写的/video要跟path中的一致

<router-link to="/video">Video</router-link>

 

解决浏览器url中的#,在index.js中的VueRouter中添加mode设置为history即可:

const router = new VueRouter({
    routes,
    mode: 'history'
})	

router-link标签

该标签其实是一个组件,最终在浏览器中展示位a标签,to 相当于是href属性,除此之外还可以填写一些其他属性,下面列出部分属性:

  • replace:页面切换时不会留下历史记录
  • tag:指定之后渲染成什么组件, 比如下面面的代码会被渲染成一个span元素
    <router-link to="/" tag="span">
    
  • event:设置触发导航的事件,下面设置的是mouseover事件触发导航
    <router-link to="/video" event="mouseover">
    

动态路由

在访问一个页面的时候url有时候不是固定的,比如下面的url,表示访问编号是1001的用户

user/1001

此时就需要使用动态路由来解决了。创建组件User.vue,这里的$route是当前页面的实例,通过该实例可以获取到id的值

<template>
    <div>
        <div>用户的信息{{$route.params.id}}</div>
        <div>用户的信息{{id}}</div>
    </div>

</template>
<script>
    export default {
        name: "User",
        computed:{
            id(){
                return this.$route.params.id;
            }
        }
    }
</script>

index.js中配置路由,这里的:id可以看做是一个变量

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

App.vue中添加router-link,使用v-bind将id进行双向绑定:

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

上面绑定了属性id,所以需要再添加id属性:

	data() {
        return {
            id: '1001'
        }
    }

编程式导航

上面在router-link通过的to属性进行跳转的声明式导航,除此之外可以使用编程式导航$router.push()进行跳转,需要注意的是这里的$router是VueRouter实例,要跟上面的$route区分开。当希望在跳转的时候执行其他操作时就可以是编程式导航了。App.vue中修改成如下内容:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/" >Home</router-link> |
      <router-link to="/about" >About</router-link>|
      <router-link to="/video" append>Video</router-link>
      <button @click="goVideo">视频</button>
    </div>
    <router-view/>
  </div>
</template>
<script>
  export default {
    name: 'App',
    methods:{
      goVideo(){
        console.log("跳转之前做的事")
        this.$router.push('/video')
      }
    }
  }
</script>

路由懒加载

SPA的一个缺点是在首次访问的时候需要获取全部前端代码,这样就导致了首次访问较慢的问题,我们使用路由懒加载来缓解该问题。

路由懒加载是将路由对应的组件打包成js代码块,当访问这个组件的时候才会被加载。下面示例是将video的路由改成懒加载,这里import中的内容是对应组件的路径:

{
    path: '/video',
    name: 'Video',
    component: () => import('../views/Video.vue')
}

嵌套路由

实际应用中一个url也是一个树形结构,倘若希望表示下面的url:

/video/comedy
/video/tragedy

在video中又包含了不同的内容,此时就需要使用嵌套路由了。在views目录下创建video文件夹,在该文件夹下创建两个组件

Tragedy.vue:

<template>
    <div>
        悲剧片
    </div>

</template>

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

comedy.vue:

<template>
    <div>喜剧片</div>

</template>

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

index.js中需要在原来video下使用children表示子路由:

{
    path: '/video',
    name: 'Video',
    component: () => import('../views/Video.vue'),
    children: [//在children下编写子路由
        {
            path: 'comedy',
            component: () => import('../views/video/Comedy.vue')
        },
        {
            path: 'tragedy',
            component: () => import('../views/video/Tragedy.vue')
        }
    ]
}

修改Video.vue在这里填写子路由

<div>
    <!--配置子路由-->
    <router-link to="/video/comedy">comedy</router-link>
    <router-link to="/video/tragedy">tragedy</router-link>

    <router-view/>
</div>

导航守卫

导航守卫的作用是监听路由的跳转,即发生路由跳转的时候会触发导航守卫,我们可以利用导航守卫做一些权限的判断,比如用户点击跳转的时候,在导航守卫中判断用户是否有token,导航守卫相当于是前端的拦截器。导航守卫分了全局,路由独享,组件内三种,这里先看下全局前置守卫

我们可以通过router.beforeEach的方式来注册一个全局前置守卫,里面需要传入一个函数,该函数包含3个参数:

  • to:要进入的路由
  • from:从哪个路由来
  • next:是一个函数,调用之后才会正常跳转路由,有点像java过滤器中的doFilter方法
router.beforeEach((to, from, next) => {
  if (to.name !== 'Login' && !token){
    next({ name: 'Login' })  
  }else {
    next()
  }
})

 

Category: vue