复习Vue路由

一.概念

路由:是一种映射关系，根据路径来匹配页面。

二.router-view

在当前页面，匹配到的路由，通常会用来做tab的切换。

二.如何进行配置

在通过脚手架配置好的index.js文件里面进行配置

代码:

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 路由的懒加载
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/genyemian.vue')
  },
  {
    path: '/a',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 路由的懒加载
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/chenggong',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 路由的懒加载
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/chenggong.vue'),
    children: [
      {
        path: 'chenggong1',
        name: 'chenggong1',
        component: () =>
          import(
            /* webpackChunkName: "about" */ '../views/chenggong1/Children.vue'
          )
      },
      {
        path: 'chenggong2',
        name: 'chenggong2',
        component: () =>
          import(
            /* webpackChunkName: "about" */ '../views/chenggong1/Children1.vue'
          )
      }
    ]
  }
]

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

export default router

  path: '/',代表的根路由，也就是首次匹配到的页面。

路由加载的两种方式:

普通的形式:

import Home from '../views/Home.vue'

懒加载的形式：

 component: () =>
      import(/* webpackChunkName: "about" */ '../views/chenggong.vue'),

子路由配置:

通过Children这个关键字来进行匹配。

注意点:

在这里是不需要加/的,那么在什么时候加/，在上面时候不加/呢？

一般模块的一级路由都要加/，不过children数组里的子路由，可以不加，vue-router应该会补上。

三.路由跳转的方式

1.router-link

说明:相当于一个a链接

    <router-link to="要跳转的路径">成功学</router-link>

2.编程式

说明:点击按钮实现跳转

  <button @click="$router.push(要跳转的路径)">点击跳转</button>

四.route和router的区别

1.route我们平常在接收页面传递过来的参数的时候会进行使用，它指的是某一个页面。

可以看出，当我们接收传过来的参数的时候，会使用this.$route,打印看一下:

 

2.router可以看的出来多了一个r，这里代表的全局的路由信息。

可以看一下打印的结果:

 

 

五. query/params传参

1.query传参

方式1----声明式:

    <router-link to="要跳转的路径">成功学</router-link>

代码:

 <router-link to="/chenggong/chenggong1?id=100&name=123">成功学</router-link>

接收的页面:

 {{ this.$route.query.id }}
 {{ this.$route.query.name }}

路由的配置:

 {
    path: '/chenggong',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 路由的懒加载
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/chenggong.vue'),
    children: [
      {
        path: 'chenggong1',
        name: 'chenggong1',
        component: () =>
          import(
            /* webpackChunkName: "about" */ '../views/chenggong1/Children.vue'
          )
      },
      {
        path: 'chenggong2:aaa',
        name: 'chenggong2',
        component: () =>
          import(
            /* webpackChunkName: "about" */ '../views/chenggong1/Children1.vue'
          )
      }
    ]
  }

结果:

方式2----编程式

 <button @click="$router.push('/chenggong/chenggong1?id=100&name=123')">
      点击跳转
 </button>

特点:类似于get请求,穿过去的参数,会在地址栏上进行显示，刷新后路由并不会丢失。

刷新后的数据任然还在

2.params传参

1.使用name进行传参

代码:

   <button
      @click="
        $router.push({
          name: 'chenggong2',
          params: { name: '男枪' }
        })
      "
    >
      点击跳转
    </button>

路由配置的代码:

 {
    path: '/chenggong',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    // 路由的懒加载
    component: () =>
      import(/* webpackChunkName: "about" */ '../views/chenggong.vue'),
    children: [
      {
        path: 'chenggong1',
        name: 'chenggong1',
        component: () =>
          import(
            /* webpackChunkName: "about" */ '../views/chenggong1/Children.vue'
          )
      },
      {
        path: 'chenggong2:aaa',
        name: 'chenggong2',
        component: () =>
          import(
            /* webpackChunkName: "about" */ '../views/chenggong1/Children1.vue'
          )
      }
    ]
  }

接收:

<template>
  <div class="">
    {{ this.$route.params.name }}
  </div>
</template>

接收到后:

刷新后:

这是params传参的方式，它的特点就是在刷新之后，会出现丢失的情况。

3.总结

1.params传参,必须使用命名路由的方式传参；

2.params传参,不会显示在地址栏上,会保存在内存中,刷新会丢失,可以配合本地存储进行使用；

3.query的参数会显示在地址栏上,不会丢失。

六.路由守卫

1.全局的路由守卫

beforeEach------------前置路由守卫  进入路由之前会触发

beforeafterEach ----------后置路由守卫    解析路由的时候触发

beforeResolve-----------全局的解析守卫  进入路由后触发

2.beforeEnter----------路由独自享有的守卫

3.beforeRouterEnter  进入路由前触发

4.beforeRouterupdated  动态路由的参数路径发生变化的时候

5.beforeRouteLeave           路由离开的时候触发 :从A--->B就会触发

2.参数的介绍

1.三个参数

(1)to:到哪里去

(2)from:从哪里来

(3)next:表示是否通过

        

七.动态路由

概念:当我们很多个页面或者组件都要被很多次重复利用的时候, 我们的路由都指向同一个组件，这时候从不同组件进入一个"共用"的组件，并且还要传参数，渲染不同的数据。

代码:

路由的配置页面

 

 图示: