vue3路由跳转及传参

发布时间:2023年12月17日

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>

文章来源:https://blog.csdn.net/m0_74060440/article/details/134941424
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。