router

1.创建router文件

import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'


const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'Home',
    component: () => import('../components/login.vue'),
    // alias是起别名，可以有多个，访问别名时，会跳转到path指定的路由
    // alias: '/login'
    alias: ['/login', '/home']
  }
]



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



export default router

2.在mian.js中引入，app.use()插件

3.模式介绍vue2/3对比

4.路由跳转

4.1query跳转

<template>
<div @click="junp">跳转</div>
</template>

<script setup lang='ts'>
import { useRouter } from 'vue-router'

const router = useRouter()

const junp = () => {
    console.log(router)
    // 跳转到指定路由
    router.push({ name: 'Home',query:{id:1} })
}
</script>

<style scoped lang='scss'>

</style>

4.2params跳转

import { createRouter, createWebHistory } from 'vue-router'
import type { RouteRecordRaw } from 'vue-router'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/:id', // 需要指定参数接收
    name: 'Home',
    component: () => import('../components/login.vue')
  }
]

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

export default router

<template>
<div @click="junp">跳转</div>
</template>

<script setup lang='ts'>
import { useRouter } from 'vue-router'

const router = useRouter()

const junp = () => {
    console.log(router)
    // 跳转到指定路由
    router.push({ name: 'Home',params:{id:1} }) // 传参时需要路由指定参数
}
</script>

<style scoped lang='scss'>

</style>

5.replace是不会留下历史记录，即不可以前进后退（使用go、back）