My component information is not displayed!!!
the router is working great and I test it to many times but there is nothing in components when I run the project.
They all seem to have nothing in them buy I put lot`s of things in them.
I working with vue.js 2
and I have an error in console "You are using the runtime-only build of Vue where the template compiler is not available. Either pre-compile the templates into render functions, or use the compiler-included build."
app.vue:
<template>
<div>
<router-link to="/">app</router-link>
<router-link to="/RoutOne">RoutOne</router-link>
<router-link to="/RoutTwo">RoutTwo</router-link>
<router-link to="/RoutThree">RoutThree</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default {
data() {
return {};
},
methods: {},
};
main.js:
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import RoutOne from "./router/RoutOne.vue";
import RoutTwo from "./router/RoutTwo.vue";
import RoutThree from "./router/RoutThree.vue";
Vue.use(VueRouter)
const routes = [
{ path: "/", component: App },
{ path: "/RoutOne", component: RoutOne },
{ path: "/RoutTwo", component: RoutTwo },
{ path: "/RoutThree", component: RoutThree },
]
const app = new Vue({
router: new VueRouter({
routes
}),
component: app
}).$mount('#app')
component one:
<template>
<div >
<h1>someone you loved</h1>
<title></title>
<button>nothing</button>
<input disabled placeholder="nothing"/>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
component two:
<template>
<div >
<h1>loving you is a losing game</h1>
<h2>the title is : {{title}}</h2>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
component three:
<template>
<div >
<h1>and way down we go</h1>
<b-alert>wrong side</b-alert>
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
Just add mode: 'history' to your router, by default vue-router use hash mode, it uses a hash character (#) before the actual URL is internally passed.
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import RoutOne from "./router/RoutOne.vue";
import RoutTwo from "./router/RoutTwo.vue";
import RoutThree from "./router/RoutThree.vue";
Vue.use(VueRouter)
const routes = [
{ path: "/", component: App },
{ path: "/RoutOne", component: RoutOne },
{ path: "/RoutTwo", component: RoutTwo },
{ path: "/RoutThree", component: RoutThree },
]
const app = new Vue({
router: new VueRouter({
mode: "history",
routes,
}),
component: app
}).$mount('#app')
Related
I'm new in Vue(v.3) and vue-router, before I share the problem with you guys, I searched it inside Stack Overflow and google, but the problem still unresolved.
I define two routes:
/login
/admin/index
Problem:
the login route is working correctly. but
when I try to go to the admin route, it displays the login form instead of the admin panel.
NOTE : I declared <router-view></router-view> inside components/layouts/MasterComponent.vue, and inside App.vue ,I just import the login component.
Here is my code:
routes:
import { createRouter, createWebHistory } from 'vue-router'
import LoginComponent from "../components/auth/LoginComponent";
import MasterComponent from "../components/layouts/MasterComponent";
import ProjectComponent from "../components/ProjectsComponent.vue";
const routes = [{
name: "Login",
path: "/login",
component: LoginComponent,
},
// admin routes
{
name: "Index",
path: "/admin/index",
component: MasterComponent,
children: [{
path: '/admin/projects',
name: 'Projects',
component: ProjectComponent,
}]
},
];
const router = createRouter({
history: createWebHistory(),
routes,
});
export default router;
Master component code:
<template>
<div class="app">
<HeaderComponent />
<LeftMenu />
<div class="main-content">
<section class="section">
<div class="section-body">
<!-- add content here -->
<router-view></router-view>
</div>
</section>
<SiteSetting/>
</div>
<FooterComponent />
</div>
</template>
<script>
import HeaderComponent from "./HeaderComponent.vue";
import LeftMenu from "./LeftMenu.vue";
import FooterComponent from "./FooterComponent.vue";
import SiteSetting from "./SiteSetting.vue";
export default {
name: "MasterComponent",
components: {
HeaderComponent,
LeftMenu,
FooterComponent,
SiteSetting
},
};
</script>
App.vue code
<template>
<LoginComponent/>
</template>
<script>
import LoginComponent from './components/auth/LoginComponent.vue'
export default {
name: 'App',
components: {
LoginComponent
}
}
</script>
<style>
</style>
main.js code
import { createApp } from 'vue'
import App from './App.vue'
import routes from "./routes/route";
import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css"
const app = createApp(App)
app.use(routes)
app.mount('#app')
PROBLEM SOLVED
I just forgot to put <router-view></router-view> inside App.vue. and also change the routes like this:
// admin routes
{
name: "Index",
path: "/admin",
component: MasterComponent,
redirect: '/dashboard',
children: [{
path: '/dashboard',
name: 'Dashboard',
component: DashboardComponent,
}]
},
App.vue before changes:
<template>
<LoginComponent/>
</template>
<script>
import LoginComponent from './components/auth/LoginComponent.vue'
export default {
name: 'App',
components: {
LoginComponent
}
}
</script>
<style>
</style>
App.vue after changes:
<template>
<router-view></router-view>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
</style>
Here's my set up:
This is the parent "Welcome.blade.php" set up. I'm including the relevant information since the file is pretty long:
<div id='app'>
<router-view></router-view>
</div>
<script src="{{asset('js/app.js')}}"></script>
Here is the app.js file:
require('./bootstrap');
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
Vue.use(VueRouter);
const router = new VueRouter({
routes
});
const app = new Vue({
el: '#app',
router,
});
Here is the routes.js file:
let login= require('./components/auth/login.vue').default
let register= require('./components/auth/register.vue')
const routes = [
{path: '/', component: login},
{path: '/register', component: register}
]
export default routes;
The Login.vue component is this:
<template>
<h1>Login page</h1>
</template>
<script>
</script>
<style scoped>
</style>
Register component is the same except instead of "Login page" it's "registration page." My question is, why doesn't the component render? I'm using laravel 8 and I've already installed Vue-router. Can anyone please help a newb?
Im following this YT tutorial, I followed the steps but it seems that the ExampleComponent does not show. The App.vue shows but not the route.
Here are my code:
app.js
import Vue from 'vue';
import router from './router';
import App from './components/App';
require('./bootstrap');
const app = new Vue({
el: '#app',
components: {
App
},
router,
});
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import ExampleComponent from './components/ExampleComponent';
Vue.use(VueRouter);
export default new VueRouter({
routes : [
{ path : '/', component : ExampleComponent }
],
mode: 'history'
});
App.vue
<template>
<div>
<h1> Hello!</h1>
<router-view></router-view>
</div>
</template>
<script>
export default {
name : "App"
}
</script>
<style scoped>
</style>
app.blade.php
<body>
<div id="app">
<App></App>
</div>
</body>
web.php
Auth::routes();
Route::get('/{any}', 'HomeController#index')->where('any', '.*');
Thanks in advance.
Change the mode from history to hash because the history mode in this case is reserved to Laravel routing system :
export default new VueRouter({
routes : [
{ path : '/', component : ExampleComponent }
],
mode: 'hash'
});
The mode: 'hash' is a great solution.
But if u want to use mode: "history" Then you have to add base Parameter . Base is useful when the application is hosted inside of a folder like http://localhost/laravel-8/. So code rewrite like following -
export default new VueRouter({
mode: "history",
base: '/laravel-8/',
fallback:true,
routes : [
{ path : '/', component : ExampleComponent }
]
})
Instead of /laravel-8/, you use your project subdirectory name.
Documentation: https://router.vuejs.org/guide/migration/#moved-the-base-option
In Vue if I place import VFacebookLogin from 'vue-facebook-login-component' either in my App.vue or main.js I will get error message "Uncaught ReferenceError: regeneratorRuntime is not defined" in devtools.
If I remove that line the error goes away.
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'
import Vue from 'vue'
import App from './App.vue'
import VueRouter from 'vue-router'
import { library } from '#fortawesome/fontawesome-svg-core'
import { faUserSecret } from '#fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome'
Vue.config.productionTip = false
Vue.component('font-awesome-icon', FontAwesomeIcon)
library.add(faUserSecret)
Vue.use(VueRouter)
const Home = { template: '<div>temp</div>' }
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: () => import('./views/About.vue') },
{ path: '/submitArtwork', component: () => import('./views/submitArtwork.vue') },
]
const router = new VueRouter({
routes
})
new Vue({
router,
render: h => h(App),
}).$mount('#app')
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/submitArtwork">Submit Artwork</router-link>
</div>
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<transition
name="fade"
mode="out-in"
></transition>
<router-view/>
<v-facebook-login app-id="966242223397117"></v-facebook-login>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import About from './components/about.vue'
import VFacebookLogin from 'vue-facebook-login-component'
export default {
name: 'app',
components: {
HelloWorld,
VFacebookLogin,
About
},
}
</script>
<style>
...
</style>
Removing the import removes the error, although I want to import that component (which is installed via npm).
I try use vue-router, but something went wrong.
On page rendered router-link, by click url changed. localhost/#/ -> localhost/#/contacts but component steal main page. Update only if page reload.
main.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './index.vue';
import Error404 from './404.vue';
import Routes from './route';
Vue.use(VueRouter);
const router = new VueRouter({
mode: 'hash',
routes: Routes
});
window.onload = () => {
new Vue({
router: router,
el: '#app-container',
data: {
currentRoute: window.location.hash.split('#')[1]
},
computed: {
ViewComponent () {
return Routes.filter(item => item.path == this.currentRoute)[0] || Error404
}
},
render (h) { return h(this.ViewComponent.component ? this.ViewComponent.component : this.ViewComponent) }
});
}
route.js
const routes = [
{path: '/', component: mainPage},
{path: '/example1', component: examplePage},
{path: '/example2', component: exampleForm},
{path: '/contacts', component: contacts}
];
export default routes
index.vue
<template lang="jade">
div(id="app")
router-link(to="/example1") Example1
br
router-link(to="/example2") Example2
br
router-link(to="/contacts") Contacts
</template>
<script type="text/javascript">
export default {
}
</script>
I fix problem by add
watch: {
'$route'(to, from) {
this.$router.go(this.$router.currentRoute)
}
}
for main.js, but i think this is very bad solution.
you are missing router-view. this is the component responsible to render the component that the router needs to display
please consider this code structure based on official boilerplate:
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
index.vue
<template>
<div id="app">
<router-view/>
<router-link to="example1">example1</router-link>
<router-link to="example2">example2</router-link>
</div>
</template>
index.js (like your route.js)
import Vue from 'vue'
import Router from 'vue-router'
import example1 from '#/components/example.vue'
import example2 from '#/components/example2.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/example-1',
name: 'example-1',
component: example1
}
{
path: '/example-2',
name: 'example-2',
component: example2
}
]
})