Vue3【二十一】Vue 路由模式（createWebHashHistory /createWebHistory ）和RouterLink写法

Vue3【二十一】Vue 路由模式（createWebHashHistory /createWebHistory ）和RouterLink写法

Vue3【二十一】Vue 路由模式和普通组件目录结构
createWebHistory history模式：url不带#号，需要后端做url适配 适合销售项目 利于seo
createWebHashHistory Hash模式：url 带#号，不需要url适配，比较适合后端项目 不利于seo
路由命名 和 配置路由规则
Header 组件是一般组件一般放到components文件夹中
News About Home 组件是路由组件，一般存放在pages或views文件夹中
/*注意
1、路由逐渐通常存放在pages或views文件夹，一般组件通常存放在components文件夹中
2、通过点击路由链接，切换路由组件，视觉上‘消失’了的路由组件，默认是被 卸载 掉的，需要的时候再去挂载
3、路由组件切换时，会触发组件的beforeRouteEnter、beforeRouteUpdate、>beforeRouteLeave钩子函数

实例截图

目录结构

代码

app.vue

<template>
    <div class="app">
        <Header></Header>
        <!-- 导航区 -->
        <div class="navigate">
            <RouterLink to="/home" active-class="active"> 首页 </RouterLink>
            <!-- <RouterLink to="/news" active-class="active"> 新闻 </RouterLink> -->
            <!-- to的对象写法 -->
            <!-- 名称跳转 -->            
            <RouterLink :to="{name:'xinwen'}" active-class="active"> 新闻 </RouterLink>
            <!-- 路径跳转 -->
            <RouterLink :to="{path:'/about'}" active-class="active"> 关于 </RouterLink>
        </div>

        <!-- 展示区 -->
        <div class="main-content">
            <RouterView />
        </div>
    </div>
</template>

<script lang="ts" setup name="App">
// npm install vue-router //安装路由器

import { RouterView } from 'vue-router';
import Header from '@/components/Header.vue';
// Header 组件是一般组件一般放到components文件夹中
// News About Home 组件是路由组件，一般存放在pages或views文件夹中

/*注意
1、路由逐渐通常存放在pages或views文件夹，一般组件通常存放在components文件夹中
2、通过点击路由链接，切换路由组件，视觉上‘消失’了的路由组件，默认是被 卸载 掉的，需要的时候再去挂载
3、路由组件切换时，会触发组件的beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave钩子函数

*/

</script>

<style scoped>
.app {
    background-color: #4fffbb;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 10px;
}
.navigate {
    display: flex;
    justify-content: space-around;
    margin: 0 100px;
}
.navigate a {
    display: block;
    text-align: center;
    width: 90px;
    height: 40px;
    line-height: 40px;
    border-radius: 10px;
    background-color: #818080;
    text-decoration: none;
    color: #fff;
    /* font-size: 5px; */
    letter-spacing: 5px;
}
.navigate a.active {
    color: #ffc268;
    background-color: #fff;
    border: 1px solid #ffc268;
    font-weight: 900;
    /* text-shadow: 0 0 1px black; */
    font-family: 微软雅黑;
}

.main-content {
    margin: 0 auto;
    margin-top: 30px;
    margin-bottom: 30px;
    border-radius: 10px;
    width: 90%;
    height:400px;
    border: 1px solid;
}
</style>

Header.vue

<template>
    <h2 class="title">Vue3 路由和组件页面切换测试</h2>
</template>

<script setup lang="ts" name="Header">

</script>

<style scoped>

.title{
    text-align: center;
    word-spacing: 5px;
    margin: 30px 0;
    height: 70px;
    line-height: 70px;
    background-image: linear-gradient(45deg, #cecece, #fff);
    border-radius: 10px;
    box-shadow: 0 0 2px;
    font-size: 30px
}
</style>

index.ts

// 创建一个路由器，并暴漏出去

// 第一步：引入createRouter
import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
// 引入各种组件 
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from '@/pages/News.vue'
// 第二步：创建路由器
const router = createRouter({
    // 配置路由模式 
    // createWebHistory history模式：url不带#号，需要后端做url适配 适合销售项目 利于seo
    // createWebHashHistory Hash模式：url 带#号，不需要url适配，比较适合后端项目 不利于seo
    history: createWebHistory(),
    // 配置路由规则
    routes: [
        // { path: '/', redirect: '/home' },
        // { path: '/home', component: Home },
        // { path: '/about', component: About },
        // { path: '/news', component: News }

        // 路由命名
        { path: '/', redirect: '/home' },
        { path: '/home', name: 'zhuye', component: Home },
        { path: '/about', name: 'guanyu', component: About },
        { path: '/news', name: 'xinwen', component: News }
    ]
})

// 第三步：导出路由器
export default router

home.vue

<template>
    <div class="home">
        <img src="/public/logo.png" alt="">
    </div>
</template>

<script setup lang="ts" name="Home">

</script>

<style scoped>
.home {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}
img {
    width: 10%;
}
</style>