Vue3开发极简入门(13):编程式导航路由

前面几节文章，写的都是配置路由。但是在实际项目中，下面这种路由导航的写法才是最常用的：

比如登录页面，服务端校验成功后，跳转至系统功能页面；通过浏览器输入URL直接进入系统功能页面后，读取本地存储的Token，并提交服务端校验，没有Token或者Token失效、校验失败则跳转至登录页面；B端系统，根据服务端返回的登录用户的权限资源列表，生成菜单栏。列表后面的编辑按钮等。

这就是编程式导航。

列表页Staff.vue：

<template>
    <div class="staff">
        <main class="container">
            <aside class="sidebar">
                <button @click="naviTo(staff.id)" v-for="staff in staffList" :key="staff.id">{{ staff.name }}</button>
            </aside>
            <section class="content">
                <router-view />
            </section>
        </main>
    </div>
</template>
<script lang='ts' setup name='Staff'>
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

const staffList = reactive([
    { id: "1", name: "张三", age: 22 },
    { id: "2", name: "李四", age: 23 },
    { id: "3", name: "王五", age: 24, extInfo: "其他信息" }
])

const router = useRouter()

function findStaffById(id: string) {
    return staffList.find(item => item.id === id)
}

function naviTo(id: string) {
    console.log('跳转：', id);
    const staffInfo = findStaffById(id)
    router.push({
        name: 'staffInfo',
        params: staffInfo,
        query: staffInfo
    })
}
</script>

也可以这么写：

<button @click="naviTo(staff)" v-for="staff in staffList" :key="staff.id">{{ staff.name }}</button>

interface Staff{
    id:string,
    name:string,
    age:number,
    extInfo?:string
}

const router = useRouter()

function naviTo(staff: Staff) {
    console.log('跳转：', staff.id);
    router.push({
        name: 'staffInfo',
        params: {id:staff.id,name:staff.name,age:staff.age,extInfo:staff.extInfo},
        query: {id:staff.id,name:staff.name,age:staff.age,extInfo:staff.extInfo}
    })
}

其中router.push(...)就等于<router-link :to="...">。