vue-router 使用总结 | 青训营笔记

打代码去
88 阅读5分钟

这是我参与「第四届青训营 」笔记创作活动的第9天。

vue-router

01 相关理解

1.1 vue-router 的理解

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

1.2 对 SPA 应用的理解

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

1.3 路由的理解

1. 什么是路由?

一个路由就是一组映射关系（key - value）

key 为路径, value 可能是 function 或 component

2. 路由分类

  1. 后端路由：
    1. 理解：value 是 function, 用于处理客户端提交的请求。
    1. 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数来处理请求, 返回响应数据。
  1. 前端路由：
    1. 理解：value 是 component，用于展示页面内容。
    1. 工作过程：当浏览器的路径改变时, 对应的组件就会显示。

编写使用路由的 3 步

定义路由组件

注册路由

使用路由

02 路由总结

1.基本使用

⚠️

Vue2 --> router 3

Vue3 --> router 4

如果直接 npm i vue-router 就是默认安装最新版本的。

所以使用的是 vue2 ，就要使用 npm i vue-router@3 安装

vue2

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

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

  3. 编写router配置项:

     //引入VueRouter
 import VueRouter from 'vue-router'
 //引入Luyou 组件
 import About from '../components/About'
 import Home from '../components/Home'
 ​
 //创建router实例对象，去管理一组一组的路由规则
 const router = new VueRouter({
     routes:[
         {
             path:'/about',
             component:About
         },
         {
             path:'/home',
             component:Home
         }
     ]
 })
 ​
 //暴露router
 export default router

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

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

  5. 指定展示位置

     <router-view></router-view>

vue3

  1. 编写路由配置项
import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/HomeIndex.vue";

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: "/",
      name: "Home",
      component: Home,
    },
    {
      path: "/login",
      name: "Login",
      // 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("../views/UserLogin.vue"),
    },
  ],
});

export default router;

2.在main.ts中

import { createApp } from "vue";

import App from "./App.vue";
import router from "./router";   //<==============
import store from "./stores";

import "./assets/main.css";

const app = createApp(App);

app.use(router);   //<==============
app.use(store);

app.mount("#app");

3.使用

import { useRouter } from 'vue-router';

const router = useRouter();

function goto(){
    router.push("/about");
}

2.几个注意点

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

3.多级路由（多级路由）

  1. 配置路由规则，使用children配置项：

     routes:[
     {
         path:'/about',
         component:About,
     },
     {
         path:'/home',
         component:Home,
         children:[ //通过children配置子级路由
             {
                 path:'news', //此处一定不要写：/news
                 component:News
             },
             {
                 path:'message',//此处一定不要写：/message
                 component:Message
             }
         ]
     }
 ]

  2. 跳转（要写完整路径）：

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

4.路由的query参数

  1. 传递参数

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

 <!-- 跳转并携带query参数，to的对象写法 -->
 <router-link :to="{
     path:'/home/message/MsgDetail',
     query:{
         id:m.id,
         title:m.title
     }
 }">
 message{{ m.id }}

  2. 接收参数：

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

5.命名路由

  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>

6.路由的params参数

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

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

  2. 传递参数

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

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

  3. 接收参数：

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

7.路由的props配置

 作用：让路由组件更方便的收到参数

 {
     name:'xiangqing',
     path:'detail/:id',
     component:Detail,
 ​
     //第一种写法：props值为对象，该对象中所有的key-value的组合最终都会通过props传给Detail组件
     // props:{a:900}
 ​
     //第二种写法：props值为布尔值，布尔值为true，则把路由收到的所有params参数通过props传给Detail组件
     // props:true
     
     //第三种写法：props值为函数，该函数返回的对象中每一组key-value都会通过props传给Detail组件
     props(route){
         return {
             id:route.query.id,
             title:route.query.title
         }
     }
 }

8.<router-link>的replace属性

  1. 作用：控制路由跳转时操作浏览器历史记录的模式
  2. 浏览器的历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。路由跳转时候默认为push
  3. 如何开启replace模式：<router-link replace .......>News</router-link>

9.编程式路由导航

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

  2. 具体编码：写在具体的方法

     //$router的两个API
 this.$router.push({
     name:'xiangqing',
         params:{
             id:xxx,
             title:xxx
         }
 })
 ​
 this.$router.replace({
     name:'xiangqing',
         params:{
             id:xxx,
             title:xxx
         }
 })
 this.$router.forward() //前进
 this.$router.back() //后退
 this.$router.go(3) //可前进也可后退，看参数，这里表示前进3步

10.缓存路由组件

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

  2. 具体编码：

     <keep-alive include="News"> 
     <router-view></router-view>
 </keep-alive>
 ​
 如果有多个，写成数组形式
 ​
 <keep-alive :include="['News','Message']"> 
     <router-view></router-view>
 </keep-alive>

11.路由守卫

  1. 作用：对路由进行权限控制

  2. 分类：全局守卫、独享守卫、组件内守卫

  3. 全局守卫:

    在 router/index.js 中，写在 new VueRouter 之后 ，暴露之前

     //全局前置守卫：初始化时执行、每次路由切换前执行
 router.beforeEach((to,from,next)=>{
     console.log('beforeEach',to,from)
     if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
         if(localStorage.getItem('school') === 'atguigu'){ //权限控制的具体规则
             next() //放行
         }else{
             alert('暂无权限查看')
             // next({name:'guanyu'})
         }
     }else{
         next() //放行
     }
 })
 ​
 //全局后置守卫：初始化时执行、每次路由切换后执行
 router.afterEach((to,from)=>{
     console.log('afterEach',to,from)
     if(to.meta.title){ 
         document.title = to.meta.title //修改网页的title
     }else{
         document.title = 'vue_test'
     }
 })

  4. 独享守卫:

     // 写在单独的配置里面
 beforeEnter(to,from,next){
     console.log('beforeEnter',to,from)
     if(to.meta.isAuth){ //判断当前路由是否需要进行权限控制
         if(localStorage.getItem('school') === 'atguigu'){
             next()
         }else{
             alert('暂无权限查看')
             // next({name:'guanyu'})
         }
     }else{
         next()
     }
 }

  5. 组件内守卫：

    ⭐️ : 通过路由规则

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

总结

笔记介绍了 vue-router 的基本使用，这些都可以在官网进行学习： router.vuejs.org/zh/guide/

avatar
文章
阅读
粉丝