vue3路由跳转及传参

1.创建项目及路由

1.1 创建文件时记得勾选上vue-router，没有勾选也没有关系

// vue3安装命令
npm create vue@latest

// 以下选项可根据自己所需，进行选择，不懂就翻译
✔ Project name: … 
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
// 这里选Yes，自动配置路由
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add an End-to-End Testing Solution? … No / Cypress / Playwright
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./...
Done.

// 进入项目目录
> cd 
// 初始化配置
> npm i
// 项目运行命令
> npm run dev

1.2 如果以上选择的都是No的话，可以自己手动安装vue-router

npm install vue-router

2.配置路由 

2.1 安装完成过后，配置路由

如果使用了1.1中的方法，直接进入router文件夹配置路由即可

如果之前没有配置路由，在src下创建router文件夹，例如：src/router/index.js

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

const routes = [
    // Home是父级
    {
        path: '/',
        name: 'Home',
        component: () => import('../views/home.vue'),
        // about是子级
        children: [
            {

                path: 'about',
                name: 'about',
                component: () => import('../views/about.vue'),
            }
        ]
    },
    {
        path: '/login',
        name: 'Login',
        component: () => import('../views/login.vue')
    }
]

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

export default router

2.2 在main.js里面需要的配置

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/index'

createApp(App).use(router).mount('#app')

 2.3 在App.vue文件中配置占位符

 3.路由跳转

路由跳转页面的方式

3.1 router-link跳转

3.2.1 useRouter跳转

3.2.2 或者根据name名称跳转

4.路由传参

传参方式分别是：query和params

4.1 query传参

在另一个vue文件中接收

4.2 params传参

在路由中配置动态路由

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

const routes = [
    ......
    ......
    {
        path: '/login/:id',
        name: 'Login',
        component: () => import('../views/login.vue')
    }
]

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

export default router

传入params参数 

接收params参数