Vue_路由VueRoute

1.下载

使用命令npm i vue-router下载；

2.使用

在src文件夹下，创建一个router文件夹，里面创建一个index.js文件，里面存放路由的配置信息；

[1]注册

import Vue from 'vue'
import VueRouter from 'vue-router'
// 全局导入，本质将VueRouter挂在到Vue的原型对象上
Vue.use(VueRouter)
1
2
3
4

[2]实例化路由对象

const router=new VueRouter(options)
1

• options为配置项，值为一个对象

配置项

mode

mode表示路由模式，常使用的layout模式有两种，一种是hash、一种是 history。两者的具体使用及区别如下->传送门

routes

routes用来配置路由信息，值为一个数组，数组的每个元素为一个路由映射规则。

语法

 [
  {
    path:'路径',
    component:组件名
  }, // 添加一条路由
  {
    path:'路径'，
    redirect:'新路径'
  }， // 路由重定向-->也就是说若是输入的是路径，自动跳转到新路径页面
  {
    path:'路径', 
    component:组件名，
    children:[
      {...子路由}
    ] // 嵌套路由
  }
  ...
]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

• 属性总结
  • path:路径
  • redirect：重定向路径
  • component：组件名
  • children: 子路由的配置项

(1)配置路由-添加一条路由

import index from './index'
const routes = [
  {path:'/index', component:index}
]
const router = new VueRouter({routes})
1
2
3
4
5

(2)配置路由-嵌套路由的使用

• 需求场景:仅需修改组件下的某部分，并不需要修改整个页面；

• 步骤

  • 1.在想要使用嵌套路由的组件中加一个路由出口；
  • 2.配置该路由的children属性(是一个数组)

• 语法

  • 在children中的配置项与routes中一致；
  • 需要注意的是->嵌套路由的路径
    • 嵌套路由的路径有两种写法-> 加父路径加/,不加父路径不加/
      • eg: 在home页面嵌套路由company，其路径
      • 写法1： 直接写company 不加/
      • 写法2 写全 /home/company

• 举例说明
  

  {
      path:'/test',
      component:test,
      // 默认展示 test1组件的内容
      redirect:'/test/test1',
      children:[
        {path:'test1',component:test1},
        {path:'test2',component:test2},
        {path:'test3',component:test3},
      ]
    },
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

  <template>
    <div>
        <div>
            我是不修改部分
            <router-link to='/test/test1'>底部为第一部分</router-link>
            <router-link to='/test/test2'>底部为第二部分</router-link>
            <router-link to='/test/test3'>底部为第三部分</router-link>
        </div>
        <router-view></router-view>
    </div>
  </template>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

• 嵌套路由传参-通过router-view进行传参

  
  <router-view 参数名='参数值'>router-view>
  1
  2

  // 子组件
  props:{
     参数名：{
        type:希望参数类型
    }
  }
  1
  2
  3
  4
  5
  6

(3) 配置路由-路由重定向

有时我们希望用户输入某个路径时，自动跳转到另一个路由中,比如用户输入域名(不带路径)

const routes = [
  // 当用户没有输入路径时会自动跳转到登录页
  {path:'/', redirect:'/login'}
]
1
2
3
4

(4)配置路由-路由别名

1.语法–配置路由时

{
  path:'路经'，
  component:导入的组件，
  meta:{路由元信息}，
  alias:‘路由别名（另一个可以访问此网页的路经路经）’
}
1
2
3
4
5
6

2.使用

[1]在项目中，一般我们将’/‘路由重定向为’/login’,

{
  path:'/',
  redirect:'/login'
}
1
2
3
4

----此时也可以给登录界面起一个别名

{
  path:'/login',
  alias:'/',
  component:()=>import('login.vue')
}
1
2
3
4
5

(5)配置路由-路由元信息

1.定义：路由元信息其实就是在路由配置的时候给它设置一些额外信息；

2.语法

{ 
  path: '/login', 
  component: Login,
  // ---增加一个meta属性(是一个对象)，里面存放配置路由时的额外信息
  meta:{
    metaPath:'/login',
    title:'登录界面',
  }
}
1
2
3
4
5
6
7
8
9

3.举例说明-使用路由元信息修改网页标题

其实我们可以在每个路由页面created钩子中去修改页面的标题，但是非常的麻烦，若是页面多的话，每个页面都要写created函数去修改；

在这里我们使用路由后置导航首位+路由元信息去获取修改网页标题,代码如下

# 在配置路由的时候，在路由元信息中添加标题
const routes = [
  // 一个对象代表一个映射规则
  {
    path: '/login',
    component: login,
    meta: {
      title: '登录界面'
    }
  },
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/layout',
    redirect: '/layout/question',
    component: layout,
    children: [
      {
        path: '/layout/echart',
        component: echart,
        meta: {
          title: '数据列表'
        }
      },
      {
        path: '/layout/user',
        component: user,
        meta: {
          title: '用户列表'
        }
      },
      {
        path: '/layout/subject',
        component: subject,
        meta: {
          title: '学科列表'
        }
      },
      {
        path: '/layout/question',
        component: question,
        meta: {
          title: '题库列表'
        }
      },
      {
        path: '/layout/enterprise',
        component: enterprise,
        meta: {
          title: '企业列表'
        }
      }
    ]
  }
]
# 2.在路由后置导航守卫中,(to是代表当前进入页面的路由信息)通过to.meta.title获取我们为当前页面设置的标题，并设置到document.title。innerHTML中
router.afterEach(to => {
  // 给网页添加标题
  document.title = to.meta.title
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

(6)配置路由问题-共享组件将不会重新渲染

我们有时候开发中会把多个路由解析为同一个Vue组件。问题是，Vue默认情况下共享组件将不会重新渲染，如果你尝试在使用相同组件的路由之间进行切换，则不会发生任何变化，此时我们需要传递key来区分，达到刷新的目的

const routes = [
  {
    path: "/a",
    component: MyComponent
  },
  {
    path: "/b",
    component: MyComponent
  },
];
1
2
3
4
5
6
7
8
9
10

<template>
    <router-view :key="$route.path">router-view>
template>
1
2
3

路由独享守卫-beforeEnter

语法

路由独享守卫是指在单个路由配置的时候也可以设置的钩子函数，语法如下：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
        // 只有调用next函数才会进行路由跳转
      }
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12

使用时机

什么时候才会使用到此钩子函数呢？
情况1: 当前项目的页面为推广页面，用户通过推广链接进入某页面。而大部分页面在进入时需要获取初始化信息，可以将这些逻辑提取在beforeEnter中，那个页面需要获取在路由中进行配置；
情况2:某些页面进入之前需要进行检测是否有权限，可以在此进行配置

[3]导出实例化对象

  // 由于我们在入口文件中需要将路由对象挂在到根实例中，所以在此处需要导出(此处使用的默认导出)
  export default router;
1
2

[4]在入口文件中引入路由，并将路由实例化对象挂在到根实例中

• //导入路由
  import router from '@/router/index.js';
  new Vue({
    //挂载路由
    router,
    render: h => h(App),
  }).$mount('#app')
  1
  2
  3
  4
  5
  6
  7

• [5]路由出口

  • 在App.vue主组件中路由出口–相当于占位符，那里使用写哪里；

  •   <router-view></router-view>
    1

[5]检查路由配置成功

检查路由是否配置成功，可以在App.vue中写一个点击看是否报错；

一般不报错说明我们配置的路由是正确的！

3.路由的两种导航方式

[1]router-link

• • router-link 是已经全局注册过的自定义组件，支持用户在具有路由功能的应用中（点击）导航。 通过 to 属性指定目标地址，默认渲染成带有正确链接的 a 标签，可以通过配置 tag 属性生成别的标签.。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的 CSS 类名

  • 优点：可以使Vue Router在不重新加载页面的情况下更改URL,处理URL以及生成编码；

  • 属性

    • to：表示目标路由的链接。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象

    • replace：属性值为boolean值，默认为false;若是值为true，当点击时，会调用 router.replace() 而不是 router.push()，跳转后不会在 history 留下记录

    • event:声明可以用来触发导航的事件。可以是一个字符串或是一个包含字符串的数组

      • 
        <router-link to='/test/test2' event='mouseover'>底部为第二部分router-link>
        1
        2

    • active-class：设置 链接激活时使用的 CSS 类名；

    • tag:有时候想要 router-link 渲染成某种标签，例如 < li v-pre>,可以使用tag属性 tab=‘li’;

    • 可以通过query,params携带参数；

[2]$router

• 2.使用router的实例方法来实现

  • 在某个组件中
    • this.$router.push('路经')
    • $router.push('路经')
  • 在js中
    • 导入router
    • router.push('路经')

4.$router与$route的区别

总的来讲$router是用来操作路由的， $route是用来获取路由信息的

$router

$router是VueRouter的一个实例，他包含了所有的路由信息及功能，包括路由的跳转方法，钩子函数等，也包含一些子对象;

[1]options属性

• $router的options属性是创建 Router 时传递的原始配置象，是只读的；
  • mode:模式；
  • routes:创建路由实例化对象时传递的参数routes;

[2]currentRoute属性

• currentRoute：当前路由信息(等同于当前页面的$route)

[3]路由传参

(1)query路由传参

query传参方式是将参数拼接在路由url上进行传参；

• 语法1(简写)

  • this.$router.push('路由url?参数名1=参数值1&参数名2=参数值2')
    1

• 语法2

  • this.$router.push({
      path:'路由url',
      query:{
        参数名1:参数值1
        参数名2:参数值2
        ...
      }
    })
    1
    2
    3
    4
    5
    6
    7
    8

• 接收

  • 参数会存入到当前路由信息中，也就是说$route或 $router.currentRoute中都可以获取到

    • // 当前页面$route
      this.$route.query 为一个对象，可以通过点语法或[]语法获取指定参数
      1
      2

• 特点

  • [1]query方式传参是拼接在url上进行传参的，
    • 因此刷新页面数据不会丢失；
    • 接收到的数据都是字符串类型，若是需要其他类型需要自行转化；
  • [2]query是使用path或name进行传参的；

(2)params路由传参

params路由传参是配合路由name属性进行传参

• 语法

  • 配置路由name属性

    • {path:'路由url', component:组件， name:'组件名'}
      1

  • 传参

    • this.$router.params({
      	name:'路由名',
      	params:{
      	  参数名1:参数值1
            参数名2:参数值2
            ...
      	}
      })
      1
      2
      3
      4
      5
      6
      7
      8

  • 接收

    • 参数会存入到当前路由信息中，也就是说在$route或$router.currentRoute中都可以获取到

      • // 当前页面$route
        this.$route.params 为一个对象，可以通过点语法或[]语法获取指定参数
        1
        2

  • 特点

    • 页面刷新数据就会丢失；
    • 只能配合name属性进行传参；

(3)动态路由匹配

• 语法

  • [1]配置路由参数

    • // 这样写相当于当前路由必须携带参数，否则进入不了当前页面
      {path:'路由url/:参数名', component:组件}
      
      //这样写加不加参数都可以跳转到当前页面
      {path:'路由url/:参数名?', component:组件}
      1
      2
      3
      4
      5

  • [2]传参:跳转路由时传参(大部分是用于传递一些id之类的–不能使用数组/对象/中文字符)

    • this.$router.push('路径/参数值')
      1

  • [3]获取-在相应路由对应的组件获取

    • this.$route.params.参数名
      1

  • 注意

    • 在url中也有体现，并且刷新数据不会丢失；

[4]导航守卫

[1]全局前置守卫

1.作用：

只要是路由跳转，无论是编程式导航($route.push(‘路径’))或者是手动输入都会跳转到该回调函数中；

全局前置导航守卫就是拦截路由跳转并做一定的判断！

还没有跳转到相应的路由页面！

2.语法

# 实例化对象router.beforeEach(参数是一个异步回调函数)
router.beforEach((to,form,next)=>{
  # to 到哪里去（里面存储了要跳转的 ·路由信息·）
  //  ----path属性存储了跳转的路径(不包含参数 eg:'/layout')
  //-----fullPath属性存储了跳转的路径（包含参数）
  # form 从哪里来(里面存储了跳转之前的 ·路由信息·)
  # next回调函数(决定：能不能跳转，跳转到那里去)
  //------若是没有写next，页面会卡死(因为不知道你能不能跳转跳转到那里去)
  #若是允许跳转next()；
  #若是不允许，跳到别的地方next('新路径')；
})
1
2
3
4
5
6
7
8
9
10
11

3.举例说明

在每次进行路由跳转的时候判断存不存在token

//eg:路由每次跳转之前判断有没有token，若是有允许跳转，若是没有跳转到登录界面
if(to.path==='/login'){
    //直接跳转
    next();
}else {
    //判断是否携带了token
    let token=getToken();
    if(token){
        //若携带的是token
        next();
    }else{
        //不携带就跳转到登录界面
        next('/login');
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

[2] 全局解析守卫

beforeResolve这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to、from、next三个。

和beforeEach区别为：在 beforeEach 和 组件内 beforeRouteEnter 之后，afterEach之前调用。

[3]全局后置导航守卫

1.作用：

当执行完路由跳转之后执行的钩子；

已经跳转到相应的路由(页面)

2.语法

router.afterEach((to, from) => {
 # to中存储了当前页面的 ·路由信息·
 //-------fullPath(全路径)
 //-------path(路径)
 --------------------区别：全路径携带参数，路径不携带参数
 //params----params类型的参数
 //query=---query类型的参数
 --------------------
  //meta:路由元信息
  #----就是在路由配置的时候给它设置一些额外信息；
  #----若是没有额外信息，to.meta是一个空的对象
})
1
2
3
4
5
6
7
8
9
10
11
12

3.举例说明—使用后置守卫设置路由标题

/权限控制---路由后置守卫
router.afterEach(to => {
   window.document.title= to.meta.title;
  })
#修改标题window.document.title='值'
1
2
3
4
5

[4]组件内-组件前置守卫

在还没有进入该组件之前触发，在渲染该组件的对应路由被​​confirm​​​前调用，此时不能获取组件实例 ​​this​​​，因为当守卫执行前，组件实例还没被创建，但是可以通过传一个回调给​​next​​​来访问组件实例，在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数，即上文参数中提到的​​next((vm)=>{})​​。

  beforeRouteEnter: function(to, from, next) {
    // 若是想获取实例对象及数据，可以在next回调函数中获取
    next(vm=>{
    })
  }
1
2
3
4
5

[5] 组件内-组件更新守卫

组件更新守卫在动态路由中使用，由于动态路由中切换路由的时候，由于绑定的是同一个组件因此在不会在重新渲染，但是为了可以让组件中的内容重新渲染，有两种方法第一种使用​​watch​​​监听，这种需要使用​​props​​​写法，另一种就是在​​beforeRouteUpdate​​​中定义，其会监听到动态路由的改变，因此可以在这个钩子中获取异步动态路由对应的数据，举例来说，对于一个带有动态参数的路径​​/example/:id​​​，在​​/example/1​​​和​​/example/2​​​之间跳转的时候，由于会渲染同样的​​Example​​​组件，因此组件实例会被复用，而这个钩子就会在这个情况下被调用，在这个钩子函数中可以访问组件实例 ​​this​​。

  beforeRouteUpdate: function(to, from, next) {
    // ...
  }
1
2
3

[6] 组件内-组件离开守卫

导航离开该组件的对应路由时调用，可以访问组件实例​​this​​​，这个离开守卫通常用来禁止用户在还未保存修改前突然离开，该导航可以通过​​next(false)​​来取消。

  beforeRouteLeave: function(to, from, next) {
    // ...
  }
1
2
3

to与form中存在的参数(路由信息)

• fullPath:全路径(带参数)
• path:路经(仅包含路经，不带参数)
• meta:路由元信息
• params:参数
• query:参数
• name:组件名
• hash:哈希值

示例-利用导航守卫给路由跳转加进度条

进度条插件

nprogress（progress是进度的意思）

在vue中使用步骤：

• 1.下载包：npm i nprogress
• 2.导入：
  • 导入js import Nprogress form ‘nprogress’
  • 导入css import ‘nprogress/nprogress.css’
• 3.使用其方法
  • 进度条开始： Nprogress.start()
  • 进度条结束： Nprogress.done()
• 注：我们一般在导航守卫中使用·
  • 前置导航守卫—Nprogress.start()
  • 后置导航守卫— Nprogress.done()
• 注意点：
  • 不要加定时器，容易造成网站卡死的假象！

$route

$route就是存储了当前路由的配置信息

4.解决路由重复跳转的错误

路由重复跳转的问题

若是在当组件又跳转到当前组件就会报错；

—直接复制错误，搜索复制即可；

// 就是在路由的原型上加上.catch方法
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
  return originalPush.call(this, location).catch(err => err)
}
1
2
3
4
5