vue3路由跳转及传参

1.创建项目及路由

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

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

// 以下选项可根据自己所需，进行选择，不懂就翻译
? Project name: … <your-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 ./<your-project-name>...
Done.

// 进入项目目录
> cd <your-project-name>
// 初始化配置
> 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文件中配置占位符

<template>
  // 路由视图
  <router-view></router-view>
</template>

?3.路由跳转

路由跳转页面的方式

3.1 router-link跳转

<template>
    <router-link to="./login">login</router-link>
</template>

3.2.1 useRouter跳转

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const goto = () => {
    router.push('/login')
    // 或者这样写也可以
    // router.push({ path: '/login' })
}
</script>
<template>
    <button @click="goto">跳转</button>
</template>

3.2.2 或者根据name名称跳转

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const goto = () => {
    router.push({name:'Login'})
}
</script>
<template>
    <button @click="goto">跳转</button>
</template>

4.路由传参

传参方式分别是：query和params

4.1 query传参

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const goto = () => {
    router.push( {path: '/login',query:{val:'Hello World!'}})
</script>
<template>
    <button @click="goto">跳转</button>
</template>

在另一个vue文件中接收

<template>
    <h1>query参数--{{route.query.val}}</h1>
</template>
<script setup>
import { useRoute } from "vue-router";
const route=useRoute()
console.log(route.query.val);
</script>

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参数?

<script setup>
import { useRouter } from "vue-router";
const router = useRouter()
const goto = () => {
    router.push( {path:'/login',params:{id:1}})
</script>
<template>
    <button @click="goto">跳转</button>
</template>

接收params参数

<template>
    <h1>params参数--{{route.params.id}}</h1>
</template>
<script setup>
import { useRoute } from "vue-router";
const route=useRoute()
console.log(route.params.id);
</script>