Router学习

01 - 入门

1. router路由

应为vue是单页应用不会有那么多html 让我们跳转所有要使用路由做页面的跳转

Vue 路由允许我们通过不同的 URL 访问不同的内容。通过 Vue 可以实现多视图的单页Web应用

2. 安装

npm init vue@latest
// 或者
npm init vite@latest

注意：Vue3使用的是router4版，Vue2使用的是router3版

npm install vue-router // 默认最新版，是第四版

在src目录创建router文件夹，文件夹中创建index.ts文件

import {createRouter,createWebHashHistory,RouteRecordRaw} from "vue-router"

// RouteRecordRaw为定义路由的声明接口
// vue2 mode history   vue3 createWebHistory
// vue2 mode hash   vue3 createWebHashHistory
// vue2 mode abstact vue3 create createMemoryHistory //服务端渲染
const routes:Array<RouteRecordRaw> = [{
    path:"/",
    name:"Home",
    component:()=>import("@/components/Home.vue")
}]

export default createRouter({
    history:createWebHashHistory(),
    routes,
})

router-link:实现路由之间的跳转

router-view：实现的是显示url的对应组件。

// 例如将router-view挂载对应路由 App.vue

<template>
  <div>
    <div>
    <!--使用 router-link 组件进行导航 -->
    <!--通过传递 `to` 来指定链接 -->
    <!--`<router-link>` 将呈现一个带有正确 `href` 属性的 `<a>` 标签-->
      <router-link tag="div" to="/">跳转a</router-link>
      <router-link tag="div" style="margin-left:200px" to="/register">跳转b</router-link>
    </div>
    <hr />
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>
  </div>

再挂载到main.ts文件上

//mian.ts
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
createApp(App).use(router).mount('#app')

02 - 命名路由和编程式导航

1. 命名路由

除了 path 之外，你还可以为任何路由提供 name。这有以下优点：

没有硬编码的 URL
params 的自动编码/解码。
防止你在 url 中出现打字错误。
绕过路径排序（如显示一个）


const routes:Array<RouteRecordRaw> = [
    {
        path:"/",
        name:"Login",
        component:()=> import('../components/login.vue')
    },
    {
        path:"/reg",
        name:"Reg",
        component:()=> import('../components/reg.vue')
    }
]

router-link跳转方式需要改变变为对象并且有对应name

<div>
   <router-link :to="{name:'Login'}">Login</router-link>
   <router-link style="margin-left:10px" :to="{name:'Reg'}">Reg</router-link>
 </div>
 <hr />

2. 编程式导航

除了使用 <router-link> 创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现。

字符串模式

import { useRouter } from 'vue-router'
const router = useRouter()
 
const toPage = () => {
  router.push('/reg')
}

对象模式

import { useRouter } from 'vue-router'
const router = useRouter()

const toPage = () => {
  router.push({
    path: '/reg'
  })
}

命名式路由模式

import { useRouter } from 'vue-router'
const router = useRouter()
const toPage = () => {
  router.push({
    name: 'Reg'
  })
}

注意：a标签可以进行跳转，但是会进行刷新页面操作

<a href="/reg">rrr</a>

03 - 历史记录

1. replace的使用

采用replace进行页面的跳转会同样也会创建渲染新的Vue组件，但是在history中其不会重复保存记录，而是替换原有的vue组件；

router-link 使用方法

<router-link replace to="/">Login</router-link>
<router-link replace style="margin-left:10px" to="/reg">Reg</router-link>

编程式导航

<button @click="toPage('/')">Login</button>
<button @click="toPage('/reg')">Reg</button>


import { useRouter } from 'vue-router'
const router = useRouter()
const toPage = (url: string) => {
  router.replace(url)
}

2. 进行控制历史记录的前进后退

该方法采用一个整数作为参数，表示在历史堆栈中前进或后退多少步

<button @click="next">前进</button>
<button @click="prev">后退</button>

const next = () => {
  //前进 数量不限于1 可以为负值（后退）
  router.go(1)
}
 
const prev = () => {
  //后退
  router.back()
}

04 - 路由传参

1. Query路由传参

编程式导航使用router push 或者 replace 的时候改为对象形式新增query 必须传入一个对象

Query路由传参，会将传参值带到地址栏中


const toDetail = (item: Item) => {
    router.push({
        path: '/reg',
        query: item
    })
}

接收参数 —使用useRoute的query

<div>品牌：{{ route.query?.name }}</div>
<div>价格：{{ route.query?.price }}</div>
<div>ID：{{ route.query?.id }}</div>

import { useRoute } from 'vue-router';
const route = useRoute()

2. Parmas路由传参

编程式导航使用router push 或者 replace 的时候改为对象形式并且只能使用name，path无效，然后传入params

const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',
        params: item
    })
}

接收参数 —使用useRoute的parmas

<div>品牌：{{ route.params?.name }}</div>
<div>价格：{{ route.params?.price }}</div>
<div>ID：{{ route.params?.id }}</div>

import { useRoute } from 'vue-router';
const route = useRoute()

3. 动态路由传参

很多时候，我们需要将给定匹配模式的路由映射到同一个组件。例如，我们可能有一个 User 组件，它应该对所有用户进行渲染，但用户 ID 不同。在 Vue Router 中，我们可以在路径中使用一个动态字段来实现，我们称之为 路径参数

路径参数用冒号 : 表示。当一个路由被匹配时，它的 *params* 的值将在每个组件

const routes:Array<RouteRecordRaw> = [
    {
        path:"/",
        name:"Login",
        component:()=> import('../components/login.vue')
    },
    {
        //动态路由参数
        path:"/reg/:id",
        name:"Reg",
        component:()=> import('../components/reg.vue')
    }
]

const toDetail = (item: Item) => {
    router.push({
        name: 'Reg',
        params: {
            id: item.id
        }
    })
   // 或者
    router.push(`/reg/${item.id}`)
}

import { useRoute } from 'vue-router';
import { data } from './list.json'
const route = useRoute()
 
const item = data.find(v => v.id === Number(route.params.id))

二者的区别

query 传参配置的是 path，而 params 传参配置的是name，在 params中配置 path 无效
query 在路由配置不需要设置参数，而 params 必须设置
query 传递的参数会显示在地址栏中
params传参刷新会无效，但是 query 会保存传递过来的值，刷新不变 ;
路由配置

05 - 嵌套路由

一些应用程序的 UI 由多层嵌套的组件组成。在这种情况下，URL 的片段通常对应于特定的嵌套组件结构，例如：

const routes: Array<RouteRecordRaw> = [
    {
        path: "/user",
        component: () => import('../components/footer.vue'),
        children: [
            {
                path: "",
                name: "Login",
                component: () => import('../components/login.vue')
            },
            {
                path: "reg",
                name: "Reg",
                component: () => import('../components/reg.vue')
            }
        ]
    },
 
]

children 配置只是另一个路由数组，就像 routes 本身一样。因此，你可以根据自己的需要，不断地嵌套视图

<div>
    <router-view></router-view>
    <div>
        <router-link to="/">login</router-link>
        <router-link style="margin-left:10px;" to="/user/reg">reg</router-link>
    </div>
</div>

06 - 命名视图

命名视图可以在同一级（同一个组件）中展示更多的路由视图，而不是嵌套显示。命名视图可以让一个组件中具有多个路由渲染出口，这对于一些特定的布局组件非常有用。命名视图的概念非常类似于“具名插槽”，并且视图的默认名称也是 default。

一个视图使用一个组件渲染，因此对于同个路由，多个视图就需要多个组件。确保正确使用 components 配置 (带上 s)

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
 
 
const routes: Array<RouteRecordRaw> = [
    {
        path: "/",
        components: {
            default: () => import('../components/layout/menu.vue'),
            header: () => import('../components/layout/header.vue'),
            content: () => import('../components/layout/content.vue'),
        }
    },
]
 
const router = createRouter({
    history: createWebHistory(),
    routes
})
 
export default router

对应Router-view通过name对应组件

<div>
    <router-view></router-view>
    <router-view name="header"></router-view>
    <router-view name="content"></router-view>
</div>

07 - 重定向-别名

1. 重定向（redirect）

字符串形式配置，访问/ 重定向到 /user （地址栏显示/,内容为/user路由的内容）

const routes: Array<RouteRecordRaw> = [
    {
        path:'/',
        component:()=> import('../components/root.vue'),
        redirect:'/user1',
        children:[
            {
                path:'/user1',
                components:{
                    default:()=> import('../components/A.vue')
                }
            },
            {
                path:'/user2',
                components:{
                    bbb:()=> import('../components/B.vue'),
                    ccc:()=> import('../components/C.vue')
                }
            }
        ]
    }
]

对象形式配置

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        redirect: { path: '/user1' },
        children: [
            {
                path: '/user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: '/user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]

函数模式（可以传参）

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        redirect: (to) => {
            return {
                path: '/user1',
                query: to.query
            }
        },
        children: [
            {
                path: '/user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: '/user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]

2. 别名 alias

将 / 别名为 /root，意味着当用户访问 /root时，URL 仍然是 /user，但会被匹配为用户正在访问 /

const routes: Array<RouteRecordRaw> = [
    {
        path: '/',
        component: () => import('../components/root.vue'),
        alias:["/root","/root2","/root3"],
        children: [
            {
                path: 'user1',
                components: {
                    default: () => import('../components/A.vue')
                }
            },
            {
                path: 'user2',
                components: {
                    bbb: () => import('../components/B.vue'),
                    ccc: () => import('../components/C.vue')
                }
            }
        ]
    }
]

08 - 导航守卫

全局前置守卫

router.beforeEach

router.beforeEach((to, form, next) => {
    console.log(to, form);
    next()
})

每个守卫方法接收三个参数：

to: Route，即将要进入的目标路由对象；
from: Route，当前导航正要离开的路由；
next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。

权限判断（案例）

const whiteList = ['/']
 
router.beforeEach((to, from, next) => {
    let token = localStorage.getItem('token')
    //白名单 有值 或者登陆过存储了token信息可以跳转 否则就去登录页面
    if (whiteList.includes(to.path) || token) {
        next()
    } else {
        next({
            path:'/'
        })
    }
})

全局后置守卫

使用场景一般可以用来做loadingBar

你也可以注册全局后置钩子，然而和守卫不同的是，这些钩子不会接受 next 函数也不会改变导航本身：

loadingBar组件

<template>
    <div class="wraps">
        <div ref="bar" class="bar"></div>
    </div>
</template>
  
<script setup lang="ts">
import { ref,defineExpose } from "vue"
const bar = ref<HTMLElement>()
// 设置速度
let speed = ref<number>(1)
// 绑定定时器
let timer = ref<number>(0)
// 开始动画
const startBarLoading = () => {
    // 使用requestAnimationFrame逐帧动画
    timer.value = window.requestAnimationFrame(function fn() {
        if (speed.value < 90) {
            bar.value!.style.width = speed.value + '%'
            speed.value += 1
            timer.value = window.requestAnimationFrame(fn)
        } else {
            speed.value = 1
            // 清除定时器
            window.cancelAnimationFrame(timer.value)
        }
    })
}
// 结束动画
const endBarLoading = () => {
    // 开启定时器延时直接到100%
    setTimeout(() => {
        window.requestAnimationFrame(() => {
            speed.value = 100;
            bar.value!.style.width = speed.value + '%'
        })
    }, 500)
    // 延时1秒后重置速度和进度
    setTimeout(()=>{
        bar.value!.style.width = '0%'
        speed.value = 1
    },1000)
}
// 暴露自身方法
defineExpose({
    startBarLoading,
    endBarLoading
})
</script>
  
<style scoped lang="scss">
.wraps {
    position: fixed;
    top: 0;
    width: 100%;
    height: 2px;

    .bar {
        height: inherit;
        width: 0;
        background: blue;
    }
}
</style>

路由配置文件(index.ts)

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import loadingBar from "../components/loadingBar.vue";
import { createVNode, render } from "vue";

// 创建虚拟节点
const Vnode = createVNode(loadingBar);
// 将节点渲染到body上
render(Vnode, document.body);

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: () => import("../components/Home.vue"),
  },
  {
    path: "/reg",
    name: "Reg",
    component: () => import("../components/Reg.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});
// 路由前置守卫
router.beforeEach((to, from, next) => {
    // 获取节点身上暴露的方法
  Vnode.component?.exposed?.startBarLoading();
  next();
});
// 路由后置守卫
router.afterEach((to, from) => {
    // 获取节点身上暴露的方法
  Vnode.component?.exposed?.endBarLoading();
});

export default router;

09 - 路由元信息

通过路由记录的 meta 属性可以定义路由的元信息。使用路由元信息可以在路由中附加自定义的数据，例如：

权限校验标识。
路由组件的过渡名称。
路由组件持久化缓存 (keep-alive) 的相关配置。
标题名称

我们可以在导航守卫或者是路由对象中访问路由的元信息数据。

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta: {
        title: "登录"
      }
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      meta: {
        title: "首页",
      }
    }
  ]
})

使用TS扩展

如果不使用扩展将会是unknow 类型

declare module 'vue-router' {
  interface RouteMeta {
    title?: string
  }
}

10 - 路由过渡动画

想要在你的路径组件上使用转场，并对导航进行动画处理，你需要使用 v-slot API：

<!-- router-view的插槽有route为路由信息，Component为组件 -->
<router-view #default="{route,Component}">
  <!-- 动画组件 -->
<transition :enter-active-class="`animate__animated ${route.meta.transition}`">
  <component :is="Component"></component>
</transition>
</router-view>

上面的用法会对所有的路由使用相同的过渡。如果你想让每个路由的组件有不同的过渡，你可以将元信息和动态的 name 结合在一起，放在<transition> 上：

declare module 'vue-router'{
     interface RouteMeta {
        title:string,
        transition:string,
     }
}
 
const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      component: () => import('@/views/Login.vue'),
      meta:{
         title:"登录页面",
         transition:"animate__fadeInUp",
      }
    },
    {
      path: '/index',
      component: () => import('@/views/Index.vue'),
      meta:{
         title:"首页！！！",
         transition:"animate__bounceIn",
      }
    }
  ]
})

11 - 滚动行为

使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。vue-router 可以自定义路由切换时页面如何滚动。

当创建一个 Router 实例，你可以提供一个 scrollBehavior 方法

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    console.log(to, '==============>', savePosition);
    return new Promise((r) => {
      setTimeout(() => {
        r({
          top: 10000
        })
      }, 2000);
    })
  },

scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的前进/后退按钮触发) 时才可用。

scrollBehavior 返回滚动位置的对象信息，长这样：

{ left: number, top: number }

const router = createRouter({
  history: createWebHistory(),
  scrollBehavior: (to, from, savePosition) => {
    return {
       top:200
    }
  },

一般情况下，保存滚动位置：

scrollBehavior:(to,from,savePosition)=>{
    console.log(savePosition);
    
    if(savePosition){
      return savePosition
    }else{
      return {
        top:0
      }
    }
  }

12 - 动态路由

我们一般使用动态路由都是后台会返回一个路由表前端通过调接口拿到后处理(后端处理路由)

主要使用的方法就是router.addRoute

添加路由

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路由，也就是说，如果新增加的路由与当前位置相匹配，就需要你用 router.push() 或 router.replace() 来手动导航，才能显示该新路由。

router.addRoute({ path: '/about', component: About })

删除路由

有几个不同的方法来删除现有的路由：

通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径，会先删除路由，再添加路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由，因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })

通过调用 router.addRoute() 返回的回调：

const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话

当路由没有名称时，这很有用。

通过使用 router.removeRoute() 按名称删除路由：

router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

需要注意的是，如果你想使用这个功能，但又想避免名字的冲突，可以在路由中使用 Symbol 作为名字。

当路由被删除时，所有的别名和子路由也会被同时删除

查看现有路由

Vue Router 提供了两个功能来查看现有的路由：

router.hasRoute()：检查路由是否存在。
router.getRoutes()：获取一个包含所有路由记录的数组。

案例

注意一个事项vite在使用动态路由的时候无法使用别名@ 必须使用相对路径

路由报错.png

// 前端
const initRouter = async () => {
    const result = await axios.get('http://localhost:9999/login', { params: formInline });
    result.data.route.forEach((v: any) => {
        router.addRoute({
            path: v.path,
            name: v.name,
                                    //这儿不能使用@
            component: () => import(`../views/${v.component}`)
        })
        router.push('/index')
    })
    console.log(router.getRoutes());
 
}

// 后端
import express, { Express, Request, Response } from 'express'
 
const app: Express = express()
 
app.get('/login', (req: Request, res: Response) => {
    res.header("Access-Control-Allow-Origin", "*");
    if (req.query.user == 'admin' && req.query.password == '123456') {
        res.json({
            route: [
                {
                    path: "/demo1",
                    name: "Demo1",
                    component: 'demo1.vue'
                },
                {
                    path: "/demo2",
                    name: "Demo2",
                    component: 'demo2.vue'
                },
                {
                    path: "/demo3",
                    name: "Demo3",
                    component: 'demo3.vue'
                }
            ]
        })
    }else{
        res.json({
            code:400,
            mesage:"账号密码错误"
        })
    }
})
 
app.listen(9999, () => {
    console.log('http://localhost:9999');
 
})

router笔记(Vue3)

Router学习

01 - 入门

1. router路由

2. 安装

02 - 命名路由和编程式导航

1. 命名路由

2. 编程式导航

03 - 历史记录

1. replace的使用

2. 进行控制历史记录的前进后退

04 - 路由传参

1. Query路由传参

2. Parmas路由传参

3. 动态路由传参

05 - 嵌套路由

06 - 命名视图

07 - 重定向-别名

1. 重定向（redirect）

2. 别名 alias

08 - 导航守卫

全局前置守卫

全局后置守卫

09 - 路由元信息

10 - 路由过渡动画

11 - 滚动行为

12 - 动态路由

添加路由

删除路由

查看现有路由

案例

小潘

Router学习

01 - 入门

1. router路由

2. 安装

02 - 命名路由和编程式导航

1. 命名路由

2. 编程式导航

03 - 历史记录

1. replace的使用

2. 进行控制历史记录的前进后退

04 - 路由传参

1. Query路由传参

2. Parmas路由传参

3. 动态路由传参

05 - 嵌套路由

06 - 命名视图

07 - 重定向-别名

1. 重定向 （redirect）

2. 别名 alias

08 - 导航守卫

全局前置守卫

全局后置守卫

09 - 路由元信息

10 - 路由过渡动画

11 - 滚动行为

12 - 动态路由

添加路由

删除路由

查看现有路由

案例

小潘

1. 重定向（redirect）