我不能使用 Vue.use 来使用 VueRouter

Posted 2023-03-14

【中文标题】我不能使用 Vue.use 来使用 VueRouter

【英文标题】：I can't use Vue.use to use VueRouter

【发布时间】：2021-10-16 20:58:17

【问题描述】：

我有一个 vue js 的问题，我想使用 VueRouter 来链接 2 个 vue 组件，但我似乎有一个 Vue.use 的问题，我有这个错误：

我不认为问题出在 VueRouter 而是更多关于 vue 导入的问题我现在有点迷路了

//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 现在是这样的：

【问题讨论】：

从 vue 中删除导入 vue 并仅利用 window.Vue。

@Cameron 我已经试过了，同样的错误

你的 package.json 是什么样的？

你还在 laravel mix 中使用 .vue() 方法吗？ mix.js('src/app.js', 'dist').vue();

@Cameron 我编辑了我的帖子

【参考方案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

【讨论】：

这里是从 vue2 到 vue3 的重大更改的链接，例如 vue-router v2 到 v4 next.router.vuejs.org/guide/migration

我的 app.js 文件中有一个“无法解析 'vue-router'，它无法编译 @Szymon Pawlus

但是 app.use 似乎可以工作，只是 vue-router 的问题

在 package.json 的依赖项中似乎没有 vue-router。 npm i vue-router

@SzymonPawlus 他在我的 package.json 中，但是版本是黄色的，当我把鼠标放在上面时我没有任何信息，我会更新我的帖子让你看到它