首页 前端知识 Vue3【二十一】Vue 路由模式(createWebHashHistory /createWebHistory )和RouterLink写法

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

2024-08-10 22:08:27 前端知识 前端哥 915 742 我要收藏

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>
转载请注明出处或者链接地址:https://www.qianduange.cn//article/15227.html
标签
评论
发布的文章

Jquery (第三章笔记)

2024-08-18 00:08:37

jquery实现tab切换简单好用

2024-08-18 00:08:35

jQuery Cookie 插件使用教程

2024-08-14 22:08:01

jQuery的DOM操作

2024-08-18 00:08:21

echarts显示中国地图

2024-08-18 00:08:11

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!