在vue3中不是像传统网页那样使用a标签然后href指向链接页面地址，是通过vue-router组件生成的，今天我们就来看看下如何在vue3中使用vue-route
首先是安装，我们使用的是npm

npm install vue-router@4

然后在src目录下创建一个router目录，再创建一个index.js文件，我们简单学习的配置如下：

import { createRouter,createWebHistory } from 'vue-router';
import Cate from '@/views/Cate.vue';
import Post from '@/views/Post.vue';
import Search from '@/views/Search.vue';

const routes = [
    { 
      path: '/',
      name: 'home',
      component: Cate,
      meta: {title: '首页'}
    },
    {
      path: '/cate/:id',
      name: 'cate',
      component: Cate,
      props: true,
      meta: {
        title: '分类'
      }
    },
    {
      path: '/post/:id',
      name: 'post',
      component: Post,
      props: true,
      meta: {
        title: '内容'
      }
    },
    {
      path: '/search',
      name: 'search',
      component: Search,
      props: true,
      meta: {
        title: '搜索'
      }
    }
  ];

  const router = createRouter({
    history: createWebHistory(),
    routes,
  });
  export default router;

我们可以来学习下上述配置，首先是引入路由组件，createRouter是创建路由器，然后是创建routes规则列表，里面包含路由地址和名字，还有路由组件，注意component后面对应的都是路由组件，我们可以将这些组件通过规范都放入/src/views/目录下
meta则是后面用到的标题，props是将路由参数暴露到路由组件下，那么路由组件内就可以通过defineProps接收到组件的所有url参数
createWebHistory模式：是表示使用history模式，这种模式下浏览器可以记录前一页，后一页，同时URL地址也是完全按照自己的想法生成，但是创新页面会出现404的问题，需要我们在nginx做一些额外的配置来避免这个问题。
另外params参数模式需要使用:id进行占位，query参数则无需占位
createWebHashHistory模式：这种模式浏览器不会记录前一页，后一页，很适合用来做后台，同时URL地址包含一个#。
我们还支持直接在路由规则配置的地址进行重定向

const routes = [
	......
    { 
      path: '/',
      name: 'home',
      redirect: { name: 'default' }
    },
    { 
      path: '/index',
      name: 'default',
      component: Cate,
      meta: {title: '首页'}
    }
  ];

最后export就是将路由器暴露出去，这样其他组件导入这个暴露的router。
接着我们要去入口的main.js文件使用路由器。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router);
app.mount('#app');

我们需要将main.js改为上述这样配置。
接着写一个普通组件，导航菜单，使用router-link生成路由导航

<template>
	<ul class="layui-nav layui-bg-gray">
	  <li class="layui-nav-item layui-this">
	    <router-link :to="{name: 'home'}">首页</router-link>
	  </li>
	  <li 
	    class="layui-nav-item" 
	    v-for="cate in cateList" 
	    :key="cate.id"
	  >
	    <router-link :to="{name: 'cate', params: {id: cate.id}}">{{ cate.cate_name }}</router-link>
	  </li>
	</ul>
</template>

<script setup>
import { ref,onMounted } from "vue";
import axios from "axios";

const cateList = ref([]);

onMounted(async ()=>{
  try {
    const response = await axios.get("/api/cate_list")
    cateList.value = response.data.data
  } catch(error) {
    console.error(error);
  }
});

</script>

我们使用router-link生成路由导航，其中最终的是to，其中name就是路由规则的名字，params后面就是路由参数
router-link中的to属性可以有很多写法，例如上面的:to，这种就是直接按照动态的方式去形成地址，也可以直接写成to，那么就是这样

<router-link to="/">首页</router-link>

一般这种就用于静态的路由导航地址。
渲染路由组件的方法就是直接在需要渲染的地方加上，也是需要先导入路由组件

import { RouterView } from 'vue-router';

然后在template模板中使用如下标签即可。

<template>
<NavBar />
<RouterView></RouterView>
</template>

<script setup>
import NavBar from './components/NavBar.vue';
import { RouterView } from 'vue-router';

</script>

都可以，你可以在任何地址放置这个路由视图
在之前定义的路由规则中，Cate.vue和Post.vue都是路由组件，我们在这两个路由组件中可以接受地址的参数，使用如下方式进行接收

defineProps(['id '])

上述方式前提是在路由规则中提前定义了props: true
还有其他方式，例如使用useRoute也可以接收路由参数

import { useRoute } from 'vue-router';
const route = useRoute();

然后使用route.params.id就可以用到传到地址的id的值，或者直接解构使用

import { toRefs } from "vue";
const { params } = toRefs(route)

然后使用params.id就可以获取id了。
除了上述一些用法外，还有例如搜索我们一般地址是/search?keywords=centos这样的，我们在点击搜索按钮以后可以使用router.push方法跳转

import { useRouter } from "vue-router";
const router = useRouter();
function jumpToSearch(){
	router.push({
		name: 'search',
		query: {
			keywords: keywords
		}
	});
}

除了push方法还有replace方法，replace方法跳转以后是不能回退的，这个和push模式有区别。

function jumpToSearch(){
	router.replace({
		name: 'search',
		query: {
			keywords: keywords
		}
	});
}

以上是目前所学习掌握的vue-router组件的所有知识，后面如果学习这个模块下其他组件，再进行补充。