vite2 + vue3 中 vue-router4 基本使用(路由基本配置)

VueRouter官网 https://router.vuejs.org/zh/installation.html#%E7%9B%B4%E6%8E%A5%E4%B8%8B%E8%BD%BD-cdn

1.安装

npm install vue-router@4 

2. vite.config.js（配置别名）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const path = require('path')

// element -plus 配置 按需导入-> 自动导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  // 别名
  resolve: {
    alias: {
      //设置别名
      '@': path.resolve(__dirname, './src'),
      '@assets': path.resolve(__dirname, './src/assets')
    }
  }
})

3. 在src下新建 router/index.js

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

const routes = [
  {
    path: '/',
    name: "Home",
    component: () => import('@/views/Home.vue'),
    redirect: { name: 'index' },
    meta: { title: '主页' },
    children: [
      {
        path: 'index',
        name: 'index',
        meta: { title: '首页' },
        component: () => import('@/views/pages/index/index.vue')
      }
    ]
  }
]


const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

4. main.js 

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

createApp(App).use(router).mount('#app')

 注意：App.vue   不要忘记 <router-view></router-view>

5.页面之间的跳转，传参，接受参数

在vue2中我们使用this.$router进行页面的跳转，this.$route 接受参数。

vue3中没有 this 这个东西了  提供了 useRouter  和  useRoute 两种方式

 //页面跳转

import { useRouter } from 'vue-router'

export default {
  setup(props,context) {
    const router = useRouter()
    // 切换页面
    const menuClick = (val) => {
      router.replace({
        path: val,
        query: {
          name:'xxx',
          id: '---'
        }
      })
    }

    return {
      menuClick
    }
  }
}

接受参数： 

import { onMounted } from "vue";
import { useRoute } from "vue-router";

export default {
  setup(props, context) {
    const route = useRoute();
    console.log(route.query.id);  //通过query 传递过来的参数
    console.log(route.query.name); //通过query 传递过来的参数

    onMounted(() => {
      console.log(document.getElementById("div"), "dom元素");
    });
  },
};