视图<router-link>不想用作链接，它显示为简单的文本。 我做错了什么？</router-link>
[英]The vue <router-link> don't want to work as a link, it shows as a simple text. What I'm doing wrong?
问题描述
I'm using vue js in laravel project.
我在 laravel 项目中使用 vue js。 I want to make my project single page application, so I need vue routes.我想让我的项目单页应用，所以需要vue路由。 I installed the latest versions of vue-loader, vue-template-compiler, vue, vue-router, but the problem still exists.我安装了最新版本的vue-loader、vue-template-compiler、vue、vue-router，但问题依然存在。
app.js应用程序.js
import bootstrap from 'bootstrap';
import {createApp} from "vue";
import { createRouter, createWebHistory } from 'vue-router'
import Login from './components/auth/Login.vue'
import Register from "./components/auth/Register";
window.$ = require( "jquery" );
const routes = [
{
path: '/',
name: 'Login',
component: Login
},
{
path: '/register',
name: 'Register',
component: Register
}
]
const router = createRouter({
history: createWebHistory(process.env.APP_URL),
routes
})
const app = createApp({});
app.component('login', Login);
app.mount('#app');
export default router
vue.blade.php vue.blade.php
<body>
<div id="app">
<router-link to="/register">Harrison</router-link>
<router-view> </router-view>
</div>
<script src="{{mix('js/app.js')}}"></script>
<script src="{{ asset('js/bootstrap.js') }}"></script>
</body>
</html>
I get tired of searching in google for the answers, nothing helps.我厌倦了在谷歌搜索答案，没有任何帮助。 Can you help me to understand what I'm doing wrong?你能帮我理解我做错了什么吗？
2 个解决方案
解决方案1
0 2021-11-21 20:31:59
You need to create a Vue app component.您需要创建一个 Vue 应用程序组件。 Assume this is the content of a file called app.vue :假设这是一个名为app.vue的文件的内容：
<template>
<router-link to="/register">Harrison</router-link>
<router-view> </router-view>
</template>
<script>
export default {
name: "App"
}
</script>
Then make your html file look like that:然后让你的 html 文件看起来像这样：
<body>
<div id="app"></div>
<script src="{{mix('js/app.js')}}"></script>
<script src="{{ asset('js/bootstrap.js') }}"></script>
</body>
</html>
Finally, change some lines in your app.js file:最后，更改app.js文件中的一些行：
...
import App from "app.vue"
...
const app = createApp(App);
...
And then it should work.然后它应该工作。
(Btw: are you on Vue2 or on Vue3 ?) （顺便说一句：你是在Vue2上还是在Vue3上？）
解决方案2
0 2021-11-21 23:22:56
It looks like app.js is not registering the Vue Router plugin.看起来app.js没有注册 Vue Router 插件。 To register the plugin, use app.use() :要注册插件，请使用app.use() ：
// main.js
const router = createRouter(/*...*/)
const app = createApp(App)
app.use(router) 👈
app.mount('#app')
Also there's no need to export the router from app.js .此外，无需从app.js导出路由器。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.