路由 vue-router4.x

Vue3支持最新版本由于Vue 3 引入了createApp API，该API更改了将插件添加到Vue实例的方式。 因此，以前版本的Vue Router将与Vue3不兼容。Vue Router 4 引入了createRouter API，该API创建了一个可以在Vue3中安装 router 实例。

一：路由配置

        1、下载vue-router：npm install --save vue-router

        2、在src下配置router和views

        3、在router下的index.js配置如下内容

import { createRouter, createWebHistory } from 'vue-router'
import HomeView from '../views/HomeView.vue'
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

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

export default router

        4、在main.ts中引用路由

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
// 引用
import router from "./router"

// 使用
createApp(App).use(router).mount('#app')

        5、在app中设置路由出口

                <router-view/>

二：路由模式 

        1、history模式

                 History选项在Vue Router 4中，这些模式已被抽象到模块中，可以将其导入并分配给新的history 选项。

import { createRouter, createWebHistory } from "vue-router";
export default createRouter({
  history: createWebHistory(),//定义history模式
  routes: [],  
});

        2、hash模式 

import { createRouter, createWebHashHistory } from "vue-router";
export default createRouter({
  history: createWebHashHistory(),//定义hash模式
  routes: [],
});

三：路由导航

        1、声明式 

                声明式和vue-router3.x一样，用router-link 

        2、编程式---useRouter

                使用useRouter,来替代this.$router

<template>
  <div>
    <button @click="fun">点击</button>
  </div>
</template>

<script setup>
  import { useRouter, useRoute } from "vue-router";
  // useRouter赋值给一个变量
      let router = useRouter();
      let fun=()=>{
       router.push("/")
      }
</script>

四：动态路由匹配--useRoute 

         一：params

                1.路由规则配置接受参数

                2.发送数据--同之前

                3.接受数据

<template>
  <div class="home"> 
  </div>
</template>
<script lang="ts" setup>
import {onMounted } from 'vue';
import {useRoute} from "vue-router";
let route=useRoute()
  onMounted(()=>{
    // 接收params
    console.log(route.params.xiaoming)
  })

</script>

         二：query                  

                1.发送

                2.接受 

<template>
  <div class="home">
  </div>
</template>
<script lang="ts" setup>
import {onMounted } from 'vue';
 import {useRoute} from "vue-router";
 let route=useRoute()
  onMounted(()=>{
    // 接收query
    console.log(route.query.xiaoming)
  })

</script>

这些是vue-router4.x区别于vue-router3.x的部分，主要是因为vue3中使用了setup，setup执行是在created之前，没有了this。其他部分如路由守卫、路由原信息、路由懒加载等 同vue-router3.x。