I have problem with my router. I want show bodyComponent on my index page, but nothing happen.
I use laravel+vue. Where I can make mistake? I not got mistake
My router:
import Vue from 'vue'
import VueRouter from 'vue-router'
import bodyComponent from '../views/bodyComponent'
Vue.use(VueRouter)
const router= new VueRouter({
mode: "history",
routes:[
{
path:"/",
components: {
default: bodyComponent,
}
}
]
})
export default router;
app.js
import router from "./router"
const app = new Vue({
el: '#app',
router
});
My index.blade.php
<div id="app">
<header-component></header-component>
<!--<body-component></body-component>-->
<router-view></router-view>
<footer-component></footer-component>
</div>
I change path in my vue route and components show on index page. On application index page I come from laravel router. So I change path to index page in vue router on name same in laravel route
My laravel router
Route::get('/tobyten', function () {
return view('tobyten.index');
})->name('tobyten');
My vue router
const router= new VueRouter({
mode: "history",
routes:[
{
path:"/tobyten",
components: {
default: bodyComponent,
}
}
]
})
Related
I'm doing a project of small CRM. In the login form, I have a component that shows an alert message when email or password is incorrect. When someone is trying to login incorrectly, then type the correct info and then logout, the message still appears unless the page is refreshed.
I tried to solve that within watch by accessing $route, so every time the route is changed, I clear the state of the message.
Alert.vue:
<template>
<div :class="'alert ' + alert.type">{{alert.message}}</div>
</template>
<script>
import { mapState, mapActions } from 'vuex';
export default {
computed: mapState({
alert: state => state.alert
}),
methods: mapActions({
clearAlert: 'alert/clear'
}),
watch: {
$route (to, from){
console.log('inside $rout');
this.clearAlert();
}
}
};
</script>
main.js:
import Vue from 'vue';
import { store } from './_store';
import { router } from './_helpers';
import App from './components/App';
import './css/main.css';
new Vue({
el: '#app',
router,
store,
render: h => h(App)
});
router.js:
import Vue from 'vue';
import Router from 'vue-router';
import Dashboard from '../components/Dashboard.vue';
import LoginPage from '../components/LoginPage.vue';
import UserPage from '../components/UserPage.vue';
Vue.use(Router);
export const router = new Router({
mode: 'history',
routes: [
{ path: '/app', component: Dashboard },
{ path: '/login', component: LoginPage },
{ path: '/app/user-info', component: UserPage },
{ path: '*', redirect: '/app' }
]
});
router.beforeEach((to, from, next) => {
const allowedPages = ['/login'];
const authRequired = !allowedPages.includes(to.path);
const loggedIn = localStorage.getItem('user');
if (authRequired && !loggedIn) {
return next('/login');
}
next();
})
I tried to do both methods in documentation https://router.vuejs.org/guide/essentials/dynamic-matching.html
For some reason, the $route isn't recognized & I can't access it.
I should also mention that in my main.js I import the router.js file which imports Router from 'vue-router' & instantiates it, so $route should be accessible from all components.
can someone shed some light on why?
link to my project: repo
The $route watcher setup you have is correct, and your component has access to $route, as can be seen if you log it in mounted().
The problem is that the watcher is in Alert.vue, which is a component that is on a page being navigated away from, so it gets destroyed, preventing the watcher being invoked. If you move the $route watcher to a component that is always kept alive (e.g., App.vue), you'll see that it works correctly.
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
Using this package: https://www.npmjs.com/package/vue-gtm
In router.js (vue cli 3) i'm trying to attach it to a router instance:
import Vue from 'vue'
import Router from 'vue-router'
import VueGtm from 'vue-gtm'
Vue.use(VueGtm, {
id: 'GTM-xxxxxxx',
enabled: true,
debug: true,
vueRouter: Router
})
export default new Router({
mode: 'history'
})
But, obviously, this won't work. How can i attach vue-gtm to a Router in my case, where i export Router instance, not setting it to a variable:
const router = new Router({})
You're incorrectly passing the Router class for vueRouter in:
Vue.use(VueGtm, {
//vueRouter: Router, // <-- DON'T DO THIS
})
The vueRouter value should be the router instance, so router.js should look similar to this:
const routes = [
//...
]
const router = new Router({
mode: 'history',
routes
})
Vue.use(VueGtm, {
vueRouter: router, // <-- router instance
//...
})
export default router
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
}
]
})
I'm trying to write my first Vuejs app. I'm using vue-cli and simple-webpack boilerplate.
When I add vue-router links to my app component I get this error in console
Error in render function: "TypeError: Cannot read property 'matched' of undefined"
Here is my code:
App.vue
<template>
<div>
<h2>Links</h2>
<ul>
<router-link to='/'>Home</router-link>
<router-link to='/query'>Query</router-link>
<router-view></router-view>
</ul>
</div>
</template>
<script>
export default {}
</script>
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import routes from './routes.js'
import App from './App.vue'
const app = new Vue({
el: '#app',
routes,
render: h => h(App)
})
routes.js
import VueRouter from 'vue-router';
let routes=[
{
path: '/',
component: require('./Components/Home.vue')
},
{
path: '/query',
component: require('./Components/Query.vue')
}
];
export default new VueRouter({routes});
The name when you add it to Vue must be router.
import router from './routes.js'
const app = new Vue({
el: '#app',
router,
render: h => h(App)
})
If, for whatever reason, you want to call the variable routes you could assign it this way.
import routes from './routes.js'
const app = new Vue({
el: '#app',
router: routes,
render: h => h(App)
})
On my Vue file I had the following code:
Then, I modified my app.js file, and place the following code:
import router from './Router/router.js'
const app = new Vue({
el: '#app',
router
});
vue & vue router & match bug & solution
match bugs
solution
name must be router
https://stackoverflow.com/a/44618867/5934465
OK
import default module bug
import default module no need {}!
Adding to this, if you are putting the routes in the same page instead of importing it, It must be declared before the Vue component render.
Like this:-
const router = new VueRouter({
mode: 'history',
routes:[
{ path: '/dashboard', component: Dashboard},
{ path: '/signin', component: Signin}
]
});
new Vue({
el: '#app',
router,
render: h => h(App)
})
Not like this :
new Vue({
el: '#app',
router,
render: h => h(App)
})
const router = new VueRouter({
mode: 'history',
routes:[
{ path: '/dashboard', component: Dashboard},
{ path: '/signin', component: Signin}
]
});
Just to add my typo that caused this. I forgot the {} on the import
import { router } from './routes.js' //correct
import router from './routes.js' //causes same error
If you put some customized codes in router/index.js,
make sure you still export default router at the end.
const router = new Router({
mode: 'history'
});
export default router;
I have faced with this issue same as you. Then I realized at the end of the index.js that I forgot to add :
export default router
Then it solves the issue in my case.