我无法使用 Vue.use 来使用 VueRouter

Question

我对 vue js 有疑问，我想将 VueRouter 用于 link 2 vue 组件，但似乎我对 Vue.use 有疑问，我有此错误：

我不认为问题出在 VueRouter 上，更多的是关于 vue import 我现在有点迷路了

//This is my app.js

import Welcome from "./Jetstream/Welcome";

require('./bootstrap');
window.Vue = require('vue');
console.log(window.vue)

// Import modules...
import { createApp, h } from 'vue';
import Vue from 'vue'
import { App as InertiaApp, plugin as InertiaPlugin } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import Router from 'vue-router'

Vue.use(Router)

const router = new VueRouter({
    mode: 'history',
    routes:
        {
            path: '/student',
            name: 'student',
            component: Welcome
        },

});

const el = document.getElementById('app');

createApp({
    render: () =>
        h(InertiaApp, {
            initialPage: JSON.parse(el.dataset.page),
            resolveComponent: (name) => require(`./Pages/${name}`).default,
        }),
})
    .mixin({ methods: { route } })
    .use(InertiaPlugin)
    .mount(el);
InertiaProgress.init({ color: '#4B5563' });

<template>
<div>Hello</div>
<!-- this is My vue component-->
<!-- i try use a simple method-->
    <a class="btn btn-primary" @click="truc"> Test</a>
<!--And this is what I swa on the documentation-->
    <router-link :to="{name: 'student'}">Student</router-link>

    <div>
        <router-view></router-view>
    </div>

</template>

<script>


export default {
    name: "Session.vue",

    methods:{
        truc(){
            this.$router.push('/student')
        }
    }

}

</script>

如果您需要更多内容，请告诉我，感谢您的帮助

{
"private": true,
"scripts": {
    "dev": "npm run development",
    "development": "mix",
    "watch": "mix watch",
    "watch-poll": "mix watch -- --watch-options-poll=1000",
    "hot": "mix watch --hot",
    "prod": "npm run production",
    "production": "mix --production"
},
"devDependencies": {
    "@inertiajs/inertia": "^0.9.1",
    "@inertiajs/inertia-vue3": "^0.4.2",
    "@inertiajs/progress": "^0.2.5",
    "@tailwindcss/forms": "^0.2.1",
    "@tailwindcss/typography": "^0.3.0",
    "@vue/compiler-sfc": "^3.0.5",
    "axios": "^0.21.1",
    "laravel-mix": "^6.0.6",
    "lodash": "^4.17.19",
    "postcss": "^8.1.14",
    "postcss-import": "^12.0.1",
    "tailwindcss": "^2.2.4",
    "vue": "^3.1.5",
    "vue-loader": "^16.1.2"
},
"dependencies": {
    "bootstrap": "^5.0.2",
    "bootstrap-icons": "^1.5.0",
    "bootstrap-vue": "^2.21.2",
    "vform": "^2.1.0",
    "vue-i18n": "^8.24.5"
}

}

这是我的package.json

但我的依赖项中有这个：

我的 app.js 现在是这样的：

Answer 1

我认为您使用的是 Vue 3，而不是 Vue 2。因此，您应该将 createApp(...) 分配给一个变量

let app = createApp(...)

您还需要做：

import {createRouter} from 'vue-router'

和设置：

const router = createRouter(...)

那你就做

app.use(router)

在文档中查看它的外观：

https://next.router.vuejs.org/guide/#javascript

我无法使用 Vue.use 来使用 VueRouter

I can't use Vue.use to use VueRouter

javascript

laravel

vue.js

vue-router

vuejs3