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>