vue3+ts+vite之路由组件的搭建

专栏目录请点击

安装vue-router

我们可以按照这篇文章安装好路由 点击

项目路由分析

如果使用vscode 可以通过ctrl + shift + 空格 来查询相关的参数提示

路由组件的搭建

我们可以首先把多有的路由搭建出来，也可以先搭建一两个路由，写完后在搭建其他的路由，这里以首页路由和搜索的路由为例

1. 在src下新建router文件夹，然后新建index.ts和routes.ts
2. index.ts用来创建路由器，routes.ts用来管理路由

路由器

index.ts

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

import routes from "@/router/routes"

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

routes.ts

export default [
    {
        path:"/",
        component:() => import("@/views/Home/Home.vue")
    },
    {  
        name:"search",
        path:"/search/:keyword?",
        component:() => import("@/views/Search/Search.vue")
    }
]

因为在实际的项目中可能更灵活，这些路由，有可能是后端返回的路由，这就需要我们动态的添加路由了，官网

3. 挂载路由

main.ts

import { createApp } from 'vue'

import App from './App.vue'
import router from "@/router"

createApp(App).use(router).mount('#app')

路由组件

我们新建views文件夹，这里专门放路由组件

Home.vue

<template>
<h1>Home</h1>
</template>

Search.vue

<script setup lang="ts">
import { ref } from "vue";
import { onBeforeRouteUpdate } from "vue-router"

const keyword = ref("")
// https://router.vuejs.org/zh/guide/essentials/dynamic-matching.html#%E5%93%8D%E5%BA%94%E8%B7%AF%E7%94%B1%E5%8F%82%E6%95%B0%E7%9A%84%E5%8F%98%E5%8C%96
// 或者使用监视解决，这里使用了导航守卫
onBeforeRouteUpdate(to => {
    const { params } = to
    keyword.value = params.keyword as string
})
</script>

<template>
    <h1>Search</h1>
    <div>{{ keyword }}</div>
</template>

因为我们点击搜索，可能触发多次路由的跳转，但是因为是跳转的同一个路由，他只初始化一次，那么我们通过路由导航守卫来进行处理 点击

跳转

调转到搜索的时候，我们使用了编程式的路由导航
Header.vue

<script setup lang="ts">
import { ref } from "vue";
import { useRouter } from "vue-router"

const router = useRouter()
const keyword = ref("")
const go_search = () => router.push({ name: "search", params: { keyword: keyword.value } })

</script>

<template>
    <header>
		...
            <div class="search-input">
                <input v-model="keyword" type="text">
                <button @click="go_search">搜索</button>
            </div>
        </section>
    </header>
</template>