Vue第十四天，Vue3路由(第一部分）

对于路由就是说一个给路划分方向的箭头就和高速公路上的指示牌一样，这就是我们的路由route,router是我们快速找到之前走过的路或者将要到的路，通俗来讲有点类似我们的地图或者导航，当前的router就是我们的定位。（个人见解）

基本切换效果

Vue3中要使用vue-router的最新版本，目前是4版本。
路由配置文件代码如下：

php 复制代码

import {createRouter,createWebHistory} from 'vue-router'
import Home from '@/pages/Home.vue'
import News from '@/pages/News.vue'
import About from '@/pages/About.vue'

const router = createRouter({
	history:createWebHistory(),
	routes:[
		{
			path:'/home',
			component:Home
		},
		{
			path:'/about',
			component:About
		}
	]
})
export default router

注释

createWebHistory

解释一下createWebHistory是我们的历史模式，他对应的就是hash模式。hash模式是在我们的域名后面挂一个#.hash模式可以上线不用操心nginx配置，但是history模式需要配置。其次就是hash模式对于SEO优化非常不好，原因是Vue本来就是一个SPA网页，又加上#.在我们html中相当于锚点。这两个缺点更加不利于SEO优化了。

路由器工作模式

`history`模式

优点：URL更加美观，不带有#，更接近传统的网站URL。

缺点：后期项目上线，需要服务端配合处理路径问题，否则刷新会有404错误。

javascript 复制代码

const router = createRouter({
	history:createWebHistory(), //history模式
	/******/
})

`hash`模式

优点：兼容性更好，因为不需要服务器端处理路径。

缺点：URL带有#不太美观，且在SEO优化方面相对较差。

javascript 复制代码

const router = createRouter({
	history:createWebHashHistory(), //hash模式
	/******/
})

main.ts代码如下：

javascript 复制代码

import router from './router/index'
app.use(router)

app.mount('#app')

注释这块代码中我们要知道使用import router from './router/index'引入路由，然后再使用app.use(router)挂载路由。

App.vue代码如下

xml 复制代码

<template>
  <div class="app">
    <h2 class="title">Vue路由测试</h2>
    <!-- 导航区 -->
    <div class="navigate">
      <RouterLink to="/home" active-class="active">首页</RouterLink>
      <RouterLink to="/news" active-class="active">新闻</RouterLink>
      <RouterLink to="/about" active-class="active">关于</RouterLink>
    </div>
    <!-- 展示区 -->
    <div class="main-content">
      <RouterView></RouterView>
    </div>
  </div>
</template>

<script lang="ts" setup name="App">
  import {RouterLink,RouterView} from 'vue-router'  
</script>

注释

import {RouterLink,RouterView} from 'vue-router'

这个是引入点击跳转的route组件RouterLink和显示路由组件的RouterView.在这里我们为什么叫路由组件，原因就是路由也属于组件，像我们自己编写的组件叫普通组件，这个vue-router引用从而在template中使用的组件叫路由组件，这里大家了解一下，后面会仔细说的，慢慢理解体会。

to的两种写法

javascript 复制代码

<!-- 第一种：to的字符串写法 -->
<router-link active-class="active" to="/home">主页</router-link>

<!-- 第二种：to的对象写法 -->
<router-link active-class="active" :to="{path:'/home'}">Home</router-link>

两个注意点

路由组件通常存放在pages 或 views文件夹，一般组件通常存放在components文件夹。
通过点击导航，视觉效果上"消失" 了的路由组件，默认是被卸载掉的，需要的时候再去挂载。

我们下次见