Vue3【二十一】Vue 路由模式（createWebHashHistory /createWebHistory ） ...

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

1. <template>
2.     <div class="app">
3.         <Header></Header>
4.         <!-- 导航区 -->
5.         <div class="navigate">
6.             <RouterLink to="/home" active-class="active"> 首页 </RouterLink>
7.             <!-- <RouterLink to="/news" active-class="active"> 新闻 </RouterLink> -->
8.             <!-- to的对象写法 -->
9.             <!-- 名称跳转 -->            
10.             <RouterLink :to="{name:'xinwen'}" active-class="active"> 新闻 </RouterLink>
11.             <!-- 路径跳转 -->
12.             <RouterLink :to="{path:'/about'}" active-class="active"> 关于 </RouterLink>
13.         </div>
15.         <!-- 展示区 -->
16.         <div class="main-content">
17.             <RouterView />
18.         </div>
19.     </div>
20. </template>
22. <script lang="ts" setup name="App">
23. // npm install vue-router //安装路由器
25. import { RouterView } from 'vue-router';
26. import Header from '@/components/Header.vue';
27. // Header 组件是一般组件一般放到components文件夹中
28. // News About Home 组件是路由组件，一般存放在pages或views文件夹中
30. /*注意
31. 1、路由逐渐通常存放在pages或views文件夹，一般组件通常存放在components文件夹中
32. 2、通过点击路由链接，切换路由组件，视觉上‘消失’了的路由组件，默认是被 卸载 掉的，需要的时候再去挂载
33. 3、路由组件切换时，会触发组件的beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave钩子函数
35. */
37. </script>
39. <style scoped>
40. .app {
41.     background-color: #4fffbb;
42.     box-shadow: 0 0 10px;
43.     border-radius: 10px;
44.     padding: 10px;
45. }
46. .navigate {
47.     display: flex;
48.     justify-content: space-around;
49.     margin: 0 100px;
50. }
51. .navigate a {
52.     display: block;
53.     text-align: center;
54.     width: 90px;
55.     height: 40px;
56.     line-height: 40px;
57.     border-radius: 10px;
58.     background-color: #818080;
59.     text-decoration: none;
60.     color: #fff;
61.     /* font-size: 5px; */
62.     letter-spacing: 5px;
63. }
64. .navigate a.active {
65.     color: #ffc268;
66.     background-color: #fff;
67.     border: 1px solid #ffc268;
68.     font-weight: 900;
69.     /* text-shadow: 0 0 1px black; */
70.     font-family: 微软雅黑;
71. }
73. .main-content {
74.     margin: 0 auto;
75.     margin-top: 30px;
76.     margin-bottom: 30px;
77.     border-radius: 10px;
78.     width: 90%;
79.     height:400px;
80.     border: 1px solid;
81. }
82. </style>

复制代码

Header.vue

1. <template>
2.     <h2 class="title">Vue3 路由和组件页面切换测试</h2>
3. </template>
5. <script setup lang="ts" name="Header">
7. </script>
9. <style scoped>
11. .title{
12.     text-align: center;
13.     word-spacing: 5px;
14.     margin: 30px 0;
15.     height: 70px;
16.     line-height: 70px;
17.     background-image: linear-gradient(45deg, #cecece, #fff);
18.     border-radius: 10px;
19.     box-shadow: 0 0 2px;
20.     font-size: 30px
21. }
22. </style>

复制代码

index.ts

1. // 创建一个路由器，并暴漏出去
3. // 第一步：引入createRouter
4. import { createRouter, createWebHashHistory, createWebHistory } from 'vue-router'
5. // 引入各种组件
6. import Home from '@/pages/Home.vue'
7. import About from '@/pages/About.vue'
8. import News from '@/pages/News.vue'
9. // 第二步：创建路由器
10. const router = createRouter({
11.     // 配置路由模式
12.     // createWebHistory history模式：url不带#号，需要后端做url适配 适合销售项目 利于seo
13.     // createWebHashHistory Hash模式：url 带#号，不需要url适配，比较适合后端项目 不利于seo
14.     history: createWebHistory(),
15.     // 配置路由规则
16.     routes: [
17.         // { path: '/', redirect: '/home' },
18.         // { path: '/home', component: Home },
19.         // { path: '/about', component: About },
20.         // { path: '/news', component: News }
22.         // 路由命名
23.         { path: '/', redirect: '/home' },
24.         { path: '/home', name: 'zhuye', component: Home },
25.         { path: '/about', name: 'guanyu', component: About },
26.         { path: '/news', name: 'xinwen', component: News }
27.     ]
28. })
30. // 第三步：导出路由器
31. export default router

复制代码

home.vue

1. <template>
2.     <div class="home">
3.         <img src="/public/logo.png" alt="">
4.     </div>
5. </template>
7. <script setup lang="ts" name="Home">
9. </script>
11. <style scoped>
12. .home {
13.     display: flex;
14.     justify-content: center;
15.     align-items: center;
16.     height: 100%;
17. }
18. img {
19.     width: 10%;
20. }
21. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。