极客开发

Vue速通(6)

Vue Router
 前端  734字

Vue-router 是基于路由和组件的，路由用于设定访问路径,将路径和组件映射起来。在 vue-router 的单页面应用中,页面的路径的改变就是组件的切换。

使用 vue-router 的步骤:

  1. 创建路由需要映射的组件（打算显示的页面）；

  2. 通过 createRouter 创建路由对象，并且传入 routes 和 history 模式；

 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

import {
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from 'vue-router'

import Home from '../Views/Home.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    {
      path: '/',
      // redirect重定向
      redirect: '/home',
    },
    {
      name: 'home',
      path: '/home',
      component: Home,
    },
    {
      // name路由记录独一无二的名称
      name: 'about',
      path: '/about',
      // 路由懒加载
      component: () => import('../Views/About.vue'),
    },
  ],
})

export default router
  1. 使用 app 注册路由对象（use 方法）；
1
2
3

import router from './router'

createApp(App).use(router).mount('#app')
  1. 路由使用: 通过<router-link>和<router-view>；
1
2
3

<router-link to="/home">首页</router-link>

<router-view></router-view>

router-link 事实上有很多属性可以配置：

to属性：是一个字符串，或者是一个对象
replace属性：设置 replace 属性的话，当点击时，会调用 router.replace()，而不是 router.push()；
active-class属性：设置激活a元素后应用的class，默认是router-link-active；
exact-active-class属性：链接精准激活时，应用于渲染的 <a> 的 class，默认是router-link-exact-active；

动态路由基本匹配

当需要将给定匹配模式的路由映射到同一个组件时，在路径中使用一个动态字段来实现，称之为路径参数。

NotFound

可编写一个动态路由用于匹配所有的 NotFound 的错误页面。

路由的嵌套

嵌套路由在子组件内部的路由进行切换。

动态添加路由

addRoute 可以动态添加路由。

路由导航守卫

Vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航，全局的前置守卫 beforeEach 是在导航触发时会被回调的。

相关文章：