vue3 路由跳轉、傳參

1.路由的路徑配置都在index.js文件里，

import { createRouter, createWebHistory } from 'vue-router' import Home from '../views/Home.vue' // 兩種方式引入頁面 const routes = [ { path: '/', name: 'Start', // 方法一 component: () => import('../views/Start.vue') }, { path: '/home', name: 'Home', // 方法二 component: Home } ] const router = createRouter({ history: createWebHistory(process.env.BASE_URL), routes }) export default router 

2.頁面里進行路由跳轉

<template> <div> <button @click="start">路由跳轉</button> </div> </template> <script> // 定義一個組件 import {defineComponent} from 'vue' import {useRouter} from 'vue-router' export default defineComponent({ name: 'Start', props:{ }, components:{ }, setup(props,ctx){ //router是全局路由對象，route= userRoute()是當前路由對象 let router = useRouter(); let start = () => { router.push({ //傳遞參數使用query的話，指定path或者name都行，但使用params的話，只能使用name指定 path:'/home', query:{ num:1 } //name:'Home', //params:{ //num:1 //} ); } return{ start } } }) </script> <style scoped lang='scss'> </style> 

3.接收參數

<template> <div> {{num}} </div> </template> <script> // 定義一個組件 import {defineComponent} from 'vue' import {useRoute} from 'vue-router' export default defineComponent({ name: 'Home', props:{ }, components:{ }, setup(props,ctx){ //router是全局路由對象，route= userRoute()是當前路由對象 let route = useRoute(); let num = route.query.num; //let num = route.params.num; return{ num } } }) </script> <style scoped lang='scss'> </style>

歡迎關注前端早茶，與廣東靚仔攜手共同進階

前端早茶專注前端，一起結伴同行，緊跟業界發展步伐~

公眾號作者：廣東靚仔