Vue笔记_06_vue-router

2023-11-13 20:02:15

Vue笔记_06_vue-router

第六章_vue-router

相关理解

vue-router的理解

vue的一个插件库，专门用来实现SPA应用

对SPA应用的理解

  1. 但页Web应用（single page web application, SPA）
  2. 整个应用只有一个完整的页面
  3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新
  4. 数据需要通过ajax请求获取

路由的理解

  1. 什么是路由？
    1. 一个路由就是一组映射关系（key-value）
    2. key为路径，value可能是function或者component
  2. 路由分类
    1. 后端路由
      1. 理解：value是function，用于处理客户端提交的请求
      2. 工作过程：服务器接受到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据
    2. 前端路由
      1. 理解：value是compoment，用于展示页面内容
        1. 工作过程：当浏览器的路径改变时，对应的组件就会显示

路由

  1. 理解：一个路由（route）就是一组对应关系（key-value），多个路由需要路由器（router关系）进行管理
  2. 前端路由：key是路径，value是组件

基本使用

  1. 安装vue-router，命令：npm i --save vue-router

  2. 应用插件：Vue.use(VueRouter)

  3. 编写router配置项

    // 改文件专门用于创建整个应用的路由器
// 引入VueRouter
import VueRouter from 'vue-router'

// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'

// 创建并暴露一个路由
export default new VueRouter({
  routes: [
    {
      path:'/about',
      component: About
    },
    {
      path:'/home',
      component: Home
    }
  ]
})

  4. 实现切换（active-class课配置高亮样式）

    <router-link active-class="active" to="/about">About</router-link>

  5. 指定展示位置

    <router-view>在没有展示组件的时候，这句话将展示出来</router-view>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Wl4j960Q-1642848821461)(C:\Users\秦小龙\AppData\Roaming\Typora\typora-user-images\image-20220122105059481.png)]

几个注意点：

  1. 路由组件通常存放在page文件夹里，一般组件存放在compoments文件夹
  2. 通过切换，隐藏了路由组件，默认是被销毁掉的，需要的时候再去挂载
  3. 每个组件都有自己的$route属性，里面存储着自己的路由信息
  4. 整个应用只有一个router，可以通过组件的$router属性获取到

嵌套（多级）路由

// 改文件专门用于创建整个应用的路由器
// 引入VueRouter
import VueRouter from 'vue-router'

// 引入组件
import About from '../pages/About'
import Home from '../pages/Home'
import News from '../pages/News'

// 创建并暴露一个路由
export default new VueRouter({
  routes: [
    {
      path:'/about',
      component: About
    },
    {
      path:'/home',
      component: Home,
      children: [
        {
          path:'news', // 除了一级路由之外，其他的不用添加 / 符号
          component: News
        }
      ]
    }
  ]
})

多级路由的访问

<router-link to="/home/news">News</router-link>

路由的query参数

  1. 传递参数

    <!-- 跳转路由并携带query参数，to的字符串写法 -->
<router-link :to="`/about?id=${u.id}&title=${u.title}`">About</router-link>

<!-- 跳转路由并携带query参数，to的对象写法 -->
<router-link 
             :to="{
                      path:'/about',
                      query: {
                          id: u.id,
                          title: u.title
                      }
                  }"
>About</router-link>

  2. 接收参数

    $route.query.id
$route.query.title

命名路由

  1. 作用：可以简化路由的跳转

  2. 如何使用

    1. 给路由命名：

      {
  path: '/demo',
  component: Demo,
  children: [
    {
      path: 'test',
      component: Test,
      children: [
        {
          name: 'hello',
          path: 'welcome',
          component: Hello,
        }
      ]
    }
  ]
}

    2. 简化跳转：

      <!-- 简化前 -->
<router-link to="/demo/test/welcome">跳转</router-link>

<!-- 简化后 -->
<router-link :to="{name: 'hello'}">跳转</router-link>

<!-- 简化写法配合传递参数 -->
<router-link 
             :to="{
                      name:'hello',
                      query: {
                          id: 666,
                          title: '你好'
                      }
                  }"
>跳转</router-link>

路由的params参数

  1. 配置路由，声明接受params参数

    {
  path: '/home',
  component: Home,
  children: [
    {
      path: 'news',
      component: News,
    },
    {
      path:'message',
      component: Message,
      children: [
        {
          name: 'xiangqing',
          path: 'detail/:id/:title', // 使用占位符声明接收params参数
          component: Detail
        }
      ]
    }
  ]
}

  2. 传递参数

    <!-- 跳转并携带params参数，to的字符串写法 -->
<router-link :to="/home/message/detail/666/你好">跳转</router-link>

<!-- 跳转并携带parans参数，to的对象写法 -->
<router-link
             :to="{
                      name:'xiangqing',
                      params: {
                          id: 666,
                          title: '你好'
                      }
                  }"
>跳转</router-link>

特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置

  1. 接收参数

    $route.params.id
$route.params.title

路由的props配置

作用：让路由组件更方便地传递参数

{
  name:'xiangqing',
  path:'detail/:id',
  component: Detail,

  // 第一种写法：props值为对象，该对象中所有key-value的组合最终都会通过props传递给Detail组件
  // props: {a: 100}

  // 第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params传给detail组件
  // props: true

  // 第三种
  props(route) {
    return {
      id: route.query.id,
      title: route.query.title
    }
  }
}

<router-link>的replace属性

  1. 作用：控制路由的跳转时操作浏览器历史记录的模式

  2. 浏览器的历史记录有两种写入方式：分别是push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认是push

  3. 如何开启replace模式：

    <router-link replace ...>News</router-link>

编程式路由导航

  1. 作用：不借助<router-link>实现路由跳转，让路由跳转更加灵活

  2. 具体编码

    // $router的两个API
this.$router.push({
  name:'xiangqing',
  params: {
    id: xxx,
    title: xxx
  }
})

this.$router.replace({
  name:'xiangqing',
  query: {
    id: xxx,
    title: xxx
  }
})

this.$router.forward() // 前进
this.$router.back() // 后退
this.$router.go(一个正数或者一个负数) // 正数是前进，负数是后退，数值大小是前进或后退的步数

缓存路由组件

  1. 作用：让不展示的路由组件保持挂载，不被销毁

  2. 具体编码

    <keep-alive include="News"> 
    <router-view></router-view>
</keep-alive>

    include里面包裹的是组件名,需要保持多个组件保持挂载时，写成数组

    <keep-alive :include="['News', 'Message']"> 
    <router-view></router-view>
</keep-alive>

两个新的生命周期

  1. 作用：路由组件所独有的两个钩子，用于捕获路由组件激活状态
  2. 具体名字
    1. activated路由组件被激活时触发
    2. deactivated路由组件失活时触发

路由守卫

  1. 作用：对路由进行权限控制
  2. 分类：全局守卫，独享守卫，组件内守卫

全局守卫

配置在route规则里面

// 全局前置守卫，初始化执行，每次路由切换前执行
router.beforeEach((to, from, next) => {
  if (to.meta.isAuth) { // 判断当前路由是否需要进行权限控制
    if (localStorage.getItem('school') === 'atguigu') { // 权限控制的具体规则
      next() // 放行
    } else {
      alert('暂无权限查看')
    }
  } else {
    next() // 放行
  }
})

// 全局后置守卫，初始化时执行，每次路由切换时执行
router.afterEach((to, from) => {
  if (to.meta.title) {
    document.title = to.meta.title // 修改网页的title
  } else {
    document.title = 'vue_test'
  }
})

独享守卫

配置在route规则里面

// 配置在route规则里面
beforeEnter: (to, from, next) => {
  if (to.meta.isAuth) { // 判断当前路由是否需要权限控制
    if (localStorage.getItem('school') === 'atguigu') {
      next()
    } else {
      alert('暂无权查看')
    }
  } else {
    next()
  }
}

组件内守卫

配置在组件内，和data, mounted同级别

// 进入守卫：通过路由规则，进入该组件时被调用
beforeRouteEnter (to, from, next) {
  // ...
}

// 离开守卫，通过路由规则，离开守卫时被调用
beforeRouteLeave (to, from, next) {
  // ...
}
上一篇：bbb


下一篇：Vue CLI 4.5.7 脚手架项目的搭建、目录结构分析、Vue Router的基本使用