Vue3路由配置、跳转

清梦压星河_Ciao

已于 2023-11-23 15:50:22 修改

阅读量568

点赞数 1

分类专栏： # vue 文章标签： vue.js

于 2023-11-23 15:44:03 首次发布

本文链接：https://blog.csdn.net/m0_53951384/article/details/134579147

版权

vue 专栏收录该内容

35 篇文章 5 订阅

订阅专栏

本文介绍了在Vue3项目中使用Vite时，如何配置路由实例，包括history和hash模式的选择，以及如何在组件中正确使用`useRoute`和`useRouter`进行路由操作。特别强调了在Vue3中由于`this`不再可用，需使用`router.push`代替`this.router.push`。

摘要由CSDN通过智能技术生成

router/index.js

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

// createRouter 创建路由实例，===> new VueRouter()
// 1. history模式: createWebHistory()   http://xxx/user
// 2. hash模式: createWebHashHistory()  http://xxx/#/user

// vite 的配置 import.meta.env.BASE_URL 是路由的基准地址，默认是 ’/‘
// https://vitejs.dev/guide/build.html#public-base-path

// 如果将来你部署的域名路径是：http://xxx/my-path/user
// vite.config.ts  添加配置  base: my-path，路由这就会加上 my-path 前缀了

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL), //所有请求都会加上base路径
  routes: []
})

export default router

import.meta.env.BASE_URL 是Vite 环境变量：https://cn.vitejs.dev/guide/env-and-mode.html
meta.env.BASE_URL可以在vite.config.js中进行配置：base，不配置默认为/

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  base: '/',
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

Vue3中路由的使用跟Vue2不同，因为vue3中没有this了

<script setup>
    const goList = () => {
        this.router.push('/list')  //此处this为undefined
    }
</script>

<template>
	<button @click="goList" >列表</button>  //错误
    <button @click="$router.push('/list')">列表</button> //正确
</template>

<script>
	import { useRoute, useRouter } from 'vue-router'
    const router= useRouter() //进行路由跳转
    const route = useRoute()  //获取请求参数
    
    const goList = () => {
        router.push("/list")
    }
</script>