Vue3-router的基本应用

一、基本使用

1. 下包：pnpm i vue-router
2. 配置src/router/index.js文件

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

export default createRouter({
    history:createWebHashHistory(),// Hash模式
    routes: [
        // 访问 / 能进入指定页面
        {path:'/',redirect:'/home'}
        {path:'/home',component: () => import('../views/Home.vue')}

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

     3、main.js文件中导入

import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'

import router from './router/'
createApp(App).use(router).mount('#app')

      4、设置路由出口App.vue

<router-view></router-view>

二、页面路由跳转：

        在v3中，组件中无法访问this，所以也无法像之前在vue2中采用的this.$route与this.$router来操作路由

         

<template>
    <div>
        登录页
    </div>
    <button @click="toHome">跳转到首页</button>
</template>

<script setup>
    // 导入useRouter 
    import { useRouter } from 'vue-router';
    const router = useRouter()
    const toHome = () => {
        router.push('/')
    }
</script>

三、query、传参

        query传参

<RouterLink to="/detail?id=1">跳转传值</RouterLink>

<template>
    <div>
        详情页{{ route.query.id }}
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route)
</script>

        params传参：

export default createRouter({
    history:createWebHashHistory(),
    routes: [
        { path:'/detail/:id',
        component:() => import('../views/Detail.vue') 
        }
    ]
})

<template>
    <div>
        详情页{{ route.params.id }}
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute()
console.log(route)
</script>