Vue2 路由

Hash 地址与组件之间的对应关系

路由工作流程

1. 用户点击页面上的路由链接
2. URL 中的 Hash 值发生变化
3. 前端路由监听到 Hash 值发生变化
4. 前端路由将与 Hash 值对应的组件渲染到浏览器上

Vue-router

Vue 提供的路由包

在 src 文件夹下创建 router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [] 

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

路由规则

routes 是用来存储路径与组件之间的匹配关系

// 1.先导入组件
import Home from '@/views/Home'

// 2. 配置 Hash 路径与组件
const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
] 

• path：Hash 路径
• name：这个路由名称
• component：组件名称

router-view

router-view 标签是 Vue-router 提供的组件占位符，用来展示与 Hash 值相匹配的组件

<template>
 <div>
   <router-view></router-view>
  </div>
</template>

router-link

Vue-router 提供用来替代 a 标签的路由超链接

<template>
 <div>
   <router-link to="/" tag="span"></router-link>
  </div>
</template>

to 属性

to 属性类似于 a 标签的 href 属性，用来设置链接地址

<router-link to="{path:'/', query: {id: this.id}}" tag="span"></router-link>

<router-link to="{name:'home', params: {id: this.id}}" tag="span"></router-link>

to 属性可以接收一个对象

• path：跳转路径
• query：查询参数
• name：路由名称
• params：请求参数（必须要和 name 搭配使用）

tag 属性

用来设置 router-link 在 DOM 中是使用什么标签来生成

• a 标签
• span标签

被选中的 router-link 会默认添加 class = "router-link-active"

可以通过在构造结构中修改 linkActiveClass 的值，来配置默认激活的class
(可以通过给类名添加样式来达到选中高亮的效果)

路由重定向

访问一个地址时，强制访问另一个地址

const routes = [
  {
    path: '/',
    redirect: '/home'
  },
] 

当访问地址是 ‘/‘ 时，强制访问 ‘/home’

路由元信息

路由存储的数据

const routes = [
  {
    path: '/',
    redirect: '/home',
    meta: {title: '首页'},
  },
] 

嵌套路由

组件的嵌套展示

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: 'user',
      name: 'User',
      component: User,
      },
      {
        path: 'info',
      name: 'Info',
      component: Info,
      },
    ]
  },
] 

子路由中 path不推荐加 ‘/‘

默认子路由

children 中某个路由规则中的 path 值为空，这条路由规则叫做默认子路由

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      // 默认子路由
      {
        path: '',
      name: 'User',
      component: User,
      },
      {
        path: 'info',
      name: 'Info',
      component: Info,
      },
    ]
  },
] 

动态路由

把 Hash 中可以变化的部分定义为参数

路径参数

const routes = [
  {
    path: '/food/:id',
    name: 'Food',
    component: Food
  },
] 

使用 ‘:’ 来定义动态参数项

在该匹配规则的组件实例中可以获取这个参数项的值

this.$route.params.参数名

this 可省略

$route 是路由的参数对象

params 是保存路径参数的数据

查询参数

<template>
 <div>
   <router-link to="/food/?type='video'&id='1'></router-link>
  </div>
</template>

查询参数都接着 ‘?’ 后面，多个参数使用 ‘&’ 连接

const routes = [
  {
    path: '/food',
    name: 'Food',
    component: Food
  },
] 

在该匹配规则的组件实例中可以获取这些参数的值

this.$route.query.参数名

query 是保存查询参数的数据

props 传参

const routes = [
  {
    path: '/food/:id',
    name: 'Food',
    component: Food,
    props: true
  },
] 

<script>
export default {
  props: ['id'],
  data() {
    return {}
  }
};
</script>

在路由规则中开启 props传参：props: true，然后就可以正常的使用 props 中的数据了

fullPath

获取完整的访问路径

this.$route.fullPath

路由懒加载

被访问时才加载，在大型项目中可以提高效率

const Foo = () => import('./Foo.vue')

导航

声明式导航

点击链接实现导航

• 普通页面：a 标签
• Vue 项目：router-link 标签

编程式导航

调用 API 方法实现导航

• 普通页面：location.href
• Vue 项目：
  • this.$router.push('Hash 地址')

增加一条浏览记录

• this.$router.replace('Hash 地址')

替换当前浏览记录

• this.$router.go(数值 n)

根据历史浏览记录进行前进或后退

• this.$router.back()

根据历史浏览记录后退一层页面

• this.$router.forward()

根据历史浏览记录前进一层页面

$route 是路由

$router 是路由器

路由守卫

全局路由前置守卫

每次发生路由跳转之前，都会触发全局前置守卫

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

beforeEach括号中的是回调函数，每次发生路由跳转之前都会触发这个函数

• to：将要访问的路由消息对象
• from：将要离开的路由信息对象
• next：是一个函数，调用 next() 表示放行，允许本次导航
  • 直接放行：next()
  • 强制跳转到某个页面：next(Hash 地址)
  • 强制停留在当前页面：next(false)

全局路由后置守卫

每次发生路由跳转之后，都会触发全局前置守卫

router.afterEach((to, from)=>{
    /* 每次跳转路由时，修改页面标题 */
    document.title = to.meta.title;
})

afterEach 括号中的是回调函数，每次发生路由跳转之后都会触发这个函数

• to：将要访问的路由消息对象
• from：将要离开的路由信息对象

组件路由守卫

设置在组件内部的路由守卫

进入组件路由守卫

<script>
export default {
  data () {
    return {}
  },
  beforeRouteEnter (to, from, next) {}
}
</script>

离开路由路由守卫

<script>
export default {
  data () {
    return {}
  },
  beforeRouteLeave (to, from) {}
}
</script>