I'm using vue router to load components. The Home & About components load fine in the browser but the Login component fails to load and returns the error above.
resources/js/components/LoginComponent.vue
<template>
<div>
<h1>login</h1>
</div>
</template>
<script>
export default {}
</script>
resources/js/app.js
import './bootstrap';
import LoginComponent from "./components/LoginComponent.vue";
const Home = { template: '<div>Home</div>' }
const About = { template: '<div>About</div>' }
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
{ path: '/login', component: LoginComponent } // edited
]
const router = VueRouter.createRouter({
// 4. Provide the history implementation to use. We are using the hash history for simplicity here.
history: VueRouter.createWebHashHistory(),
routes, // short for `routes: routes`
})
// 5. Create and mount the root instance.
const app = Vue.createApp({})
app.use(router)
app.mount('#app')
app.blade.php
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- use the router-link component for navigation. -->
<!-- specify the link by passing the `to` prop. -->
<!-- `<router-link>` will render an `<a>` tag with the correct `href` attribute -->
<router-link to="/">Go to Home</router-link>
<router-link to="/about">Go to About</router-link>
<router-link to="/login">Go to Login</router-link>
</p>
<!-- route outlet -->
<!-- component matched by the route will render here -->
<router-view></router-view>
Can you spot anything obvious as I'm stumped at the moment?
Edit:
For the correct usage of my particular versions of vue & vue-router
resources/js/app.js
import LoginComponent from "./components/LoginComponent.vue";
import './bootstrap';
const Home = { template: '<div>Home</div>' }
const routes = [
{ path: '/', component: Home },
{ path: '/login', name: "Login", component: LoginComponent },
]
resources/views/layouts/app.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Scripts -->
#vite(['resources/sass/app.scss', 'resources/js/app.js'])
</head>
<body>
<div id="app">
<p>
<router-link to="/">Go to Home</router-link>
<router-link to="/login">Login</router-link>
</p>
<router-view></router-view>
</div>
<script src="https://unpkg.com/vue#3"></script>
<script src="https://unpkg.com/vue-router#4"></script>
</body>
</html>
Related
So basically I have something like this in my home page
<template>
<div id="body">
<sideBar :menu="menu" :tableName='tableName' titleOfPage='titleOfPage'></sideBar>
<div id="menu">
HOME PAGE
</div>
</div>
</template>
In the sidebar template you can select your page. It will forward you this template
<template>
<div id="body">
<sideBar :menu="menu" :tableName='tableName' :titleOfPage='titleOfPage'></sideBar>
<div id="main">
<h1>{{ titleOfPage }}</h1>
....
I need the sidebar template to set the titleOfPage as it corresponds to the page clicked. I tried different ways but didn't manage. I appreciate the help by explaining me how to solve this issue.
The Vue docs recommend not using $router directly but instead configuring props to pass to the routed components:
const routes = [
{ path: '/', redirect: '/page-a', component: { template: `<router-view></router-view>` }, name: 'Home' },
{ path: '/page-a', component: Page, props: { titleOfPage: 'Page A' }},
{ path: '/page-b', component: Page, props: { titleOfPage: 'Page B' }},
];
If your props are dynamic and depend on the current route, you can pass a function to the props property of each route configuration:
{ path: '...', component: ..., props: (route) => ({ query: route.query.q }) }
To solve your issue, you can simply create a page component which receives the props from the router and render your sidebar component in its template:
<!-- template for page component -->
<template>
<div id="body">
<sideBar :menu="menu" :tableName='tableName' :titleOfPage='titleOfPage'></sideBar>
<div id="main">
<h1>{{ titleOfPage }}</h1>
<!-- ... -->
</div>
</div>
</template>
DEMO: stackblitz
I'm trying to render multiple components that use inline-templates using vue-router but as soon as i define the inline-template the component renders no matter the url.
Does inline-templatesworks with vue-router?
It really depends on what you mean by "work". You can Frankenstein something like this and it will do what you want without throwing any errors, but I feel I'm making the world an uglier place by just posting this example:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Vue-router with inline-template</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body>
<div id="app">
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view>
<foo inline-template id="foo"><div>foo</div></foo>
</router-view>
</div>
<script>
const Foo = { template: document.getElementById('foo').innerHTML };
const Bar = { template: '<div>bar</div>' };
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
];
const router = new VueRouter({
routes,
});
var app = new Vue({
el: '#app',
router,
});
</script>
</body>
</html>
This is pretty much the intro example from vuejs.org with one of the templates made into inline.
You can refer to your inline template using #
const Foo = { template: '#my-foo-template' }
const routes = [
{ path: '/foo', component: Foo },
];
<foo inline-template id="my-foo-template"> ... </foo>
I am trying to use a navigation guard w my router... when I use it the App component is displayed ( the navigation header) but the child HomePage component is not displayed... If I get rid of the navigation guard, no problem App and HomePage components are well displayed
what's wrong with my navigation guard usage in this case ?
router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '#/pages/HomePage'
import ShoppingLists from '#/pages/ShoppingListsPage'
Vue.use(Router)
const router = new Router({
// HTML5 mode history
mode: 'history',
routes: [
{
path: '/',
name: 'Home',
component: Home,
meta: { title: 'Home' }
},
{
path: '/shoppinglists',
name: 'ShoppingLists',
component: ShoppingLists,
meta: { title: 'Shopping Lists' }
}
]
})
router.beforeEach(function (to, from, next) {
if (to.meta && to.meta.title) {
document.title = to.meta.title
}
})
export default router
main.js
import Vue from 'vue'
import App from './App'
import router from './router'
/* eslint-disable no-new */
new Vue({
el: 'app',
router,
components: { App }
})
App.vue
<template>
<div id="app">
<ul class="navigation">
<li id="home"><router-link :to="{ name: 'Home' }" >Home</router-link></li>
<li id="shoppinglists"><router-link :to="{ name: 'ShoppingLists' }" >Shopping Lists</router-link></li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
HomePage.vue
<template>
<div class="hello">
<img src="./../assets/logo.png">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'Hello',
data () {
return {
msg: 'Welcome to our ShoppingList app'
}
}
}
</script>
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>shopping-list</title>
<link rel="shortcut icon" type="image/png" href="/static/favicon.ico"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<app></app>
<!-- built files will be auto injected -->
</body>
</html>
You have forgotten to add next().
router.beforeEach(function (to, from, next) {
if (to.meta && to.meta.title) {
document.title = to.meta.title
next()
}
next()
})
When I click foo, the console would print as expected, but the <router-view> render nothing.
The offical docs only display how to use it in a single html file and javascript code is embeded directly in it. I've read many examples but I can't make it in webpack.
Or is there any example about vue 2 router in webpack?
I create app.vue file as a layout:
<template>
<div id="app">
<h1>Hello App!</h1>
<p>
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
</p>
<router-view></router-view>
</div>
</template>
<script>
export default {
}
</script>
and webpack entry file:
import Vue from 'vue';
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
Vue.use(VueResource)
Vue.use(VueRouter)
import appView from 'app.vue'
const Foo = { template: '<div>foo</div>' , mounted(){console.log(this,'mount foo')}}
const Bar = { template: '<div>bar</div>' }
const routes = [
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar }
]
const router = new VueRouter({
routes
})
new Vue({
router,
render (h) {
return h(appView);
},
}).$mount('#app')
the html file:
<!DOCTYPE html>
<html lang='zh'>
<head>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="/static/bunlde.js"></script>
</body>
</html
In case others fall in this trap like me. In your webpack 2 config file, add:
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
I have a .vue file with the following
<template>
<div class="container">
<div class="row">
<div class="column">
<h2>Create your MIA</h2>
<p><img src="../../static/intro.gif"/></p>
<p><a v-on:click="go()" href="javascript:void(0)" class="button">Enter</a></p>
</div>
</div>
</div>
</template>
<script>
export default {
methods: {
go: function () {
console.log(this.$router.go)
this.$router.go({ path: '/app' })
}
}
}
</script>
and in a main index.html file I have
<main class="container center">
<div id="logo"></div>
<div id="section">
<router-view></router-view>
</div>
</main>
and in my main.js
import Vue from 'vue'
import Resource from 'vue-resource'
import Router from 'vue-router'
import App from './components/app'
import Intro from './components/intro'
Vue.use(Resource)
Vue.use(Router)
const route = new Router({hashbang: false,
history: true,
linkActiveClass: 'active',
mode: 'html5'})
// Pointing routes to the components they should use
route.map({
'/': {
component: Intro,
subRoutes: {
'app': {
component: App
}
}
},
'/app': {
component: App
}
})
// Any invalid route will redirect to home
route.redirect({
'*': '/app'
})
route.start(Intro, '#section')
When the stuff is compiled I am able to get the Intro component but click on the button only changes the hash but not the component....
Based on the documentation the only thing that I'm doing different is that I am changing the route programmatically.
What am I doing wrong here?