I'm trying to get the query param code, but $route.query is always empty. I've used function mode per the docs. What is missing?
Router:
// use vue-router
import Router from 'vue-router'
Vue.use(Router)
// create router
const router = new Router({
routes: [
{
path: '/',
component: Home,
props: (route) => ({ code: route.query.code })
}
]
})
Home.vue
<template>
<div>
<Navbar />
<FlatHeader />
<v-content>
<ComingSoon />
<Changes />
<EmailSubscribe />
</v-content>
<AuthorizationModal />
</div>
</template>
<script>
import AuthorizationModal from './components/AuthorizationModal';
import FlatHeader from './components/FlatHeader';
import ComingSoon from './components/ComingSoon';
import Changes from './components/Changes';
import EmailSubscribe from './components/EmailSubscribe';
export default {
name: 'Home',
components: {
FlatHeader,
ComingSoon,
Changes,
EmailSubscribe,
AuthorizationModal
},
props: {
code: {
type: String,
default: null
}
},
methods: {
},
mounted() {
console.log(this.$route)
}
}
</script>
$route console output:
I resolved this by setting the mode on Router to 'history'.
Router:
// create router
const router = new Router({
mode: 'history', // add 'history' mode
routes: [
{
path: '/',
component: Home,
props: (route) => ({ code: route.query.code })
}
]
})
Related
So I deploy this app in my server using sub directories like MyServer.com/vue/.
Inside my App.vue only show <router-view />, on local this application runs smoothly, and there is no error on console.
App.vue:
<template>
<router-view/>
</template>
<script>
export default { };
</script>
<style></style>
route.js:
import { createRouter, createWebHistory } from "vue-router";
const routes = [
{
path: "/",
name: "Home",
component: () => import("../views/Home.vue"),
redirect: "/dashboard",
children: [
// Children routes
],
},
{
path: "/login",
name: "Login",
component: () => import("../views/Login.vue"),
},
];
const router = createRouter({
history: createWebHistory(),
routes,
mode: 'hash',
});
export default router;
main.js:
import { createApp } from "vue";
import App from "./App.vue";
import router from "./route";
import ElementPlus from "element-plus";
import { Chart, registerables } from "chart.js";
import "element-plus/dist/index.css";
import "./styles/index.scss";
const app = createApp(App);
app.use(router);
app.use(ElementPlus);
app.use(Chart.register(...registerables));
app.mount("#app");
When I open any url I see always UsersList.vue component. Why? Because I include it in App.vue? If I changed it to <router-view/> I always see empty page. How can I fix it? And how can I make jump from ListView to DetailView through router-link
index.js
import Vue from 'vue'
import Router from 'vue-router'
import UsersList from '#/components/UsersList'
import UserDetail from '#/components/UserDetail'
Vue.use(Router)
export default new Router({
mode: 'history',
routes: [
{
path: '/users/',
name: 'UsersList',
component: UsersList
},
{
path: '/user/:id',
name: 'user_detail',
component: UserDetail
}
]
})
main.js
Vue.use(VueResource)
Vue.use(VueAxios)
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
App.vue
<template>
<div id="app">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
UsersList.vue
<template>
<div>
<tr v-for="user in usersList" :key="user.id">
<td><router-link :to="{name:'user_detail',params:{id:user.id}}">{{ user.id }}</router-link></td>
</tr>
</div>
</template>
<script>
export default {
name: 'UsersList',
data() {
return {
usersList: []
};
},
mounted() {
this.$axios
.get('http://127.0.0.1:8000/api/v1/users/')
.then(response => (
this.usersList = response.data.results
));
}
}
You must import your components (UserList and UserDetail) in your router configuration file (index.js).
After that you'll be able to use <router-view>
What is the url you intent to access ?
you must add a base in your Router :
export default new Router({
mode: 'history',
base:'/users',
routes: [
{
path: '/users/',
name: 'UsersList',
component: UsersList
},
{
path: '/user/:id',
name: 'user_detail',
component: UserDetail
}
]
})
I realize a progressive application web app under view and I have a problem for the use of the mobile camera. I have a blank page. Here is my file seen for the camera:
<template>
<div class="container" id="app">
<router-link class="waves-effect waves-light btn" to="/livreur" #click.native="hideMenu"><i class="material-icons">arrow_back</i>
</router-link>
<div class="camera-modal">
<video ref="video" class="camera-stream"/>
</div>
</div>
</template>
<script>
var constraints = {
audio: false,
video: {
facingMode: {exact: 'environment'}
}
}
export default {
mounted () {
navigator.mediaDevices.getUserMedia(constraints)
.then(function (mediaStream) {
var video = document.querySelector('video')
video.srcObject = mediaStream
video.onloadedmetadata = function (e) {
video.play()
}
})
.catch(function (err) {
console.log(err.name + ': ' + err.message)
})
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>
My file main.js:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
import Axios from 'axios'
import VueSignature from 'vue-signature-pad'
Vue.prototype.$http = Axios
const token = localStorage.getItem('user-token')
if (token) {
Vue.prototype.$http.defaults.headers.common['Authorization'] = token
}
Vue.use(VueSignature)
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
My router.js file:
import Vue from 'vue'
import Router from 'vue-router'
import store from './store.js'
import Home from '#/components/Home'
import Delivered from '#/components/Delivered'
import Absent from '#/components/Absent'
import Refused from '#/components/Refused'
import Livreur from '#/components/preprations/Livreur'
import Prepa from '#/components/preprations/Prepa'
import Scan from '#/components/preprations/Scan'
import Login from '#/components/Login'
Vue.use(Router)
let router = new Router({
routes: [
{
path: '/login',
name: 'Login',
component: Login
},
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/delivered',
name: 'delivered',
component: Delivered
},
{
path: '/absent',
name: 'absent',
component: Absent
},
{
path: '/refused',
name: 'refused',
component: Refused
},
{
path: '/livreur',
name: 'livreur',
component: Livreur
},
{
path: '/prepa',
name: 'prepa',
component: Prepa
},
{
path: '/scan',
name: 'Scan',
component: Scan
}
]
})
router.beforeEach((to, from, next) => {
if (to.matched.some(record => record.meta.requiresAuth)) {
if (store.getters.isLoggedIn) {
next()
return
}
next('/login')
} else {
next()
}
})
export default router
I tried to change the constraints but nothing helps, I try the default values but it does not work.
I do not see where it's blocking at all. Thank you for your help.
Using vue-router in a single page application with the code below, the watch $route function in not firing when redirecting to mycomponent.
Also the beforeRouteUpdate in mycomponent is also not firing.
How can I detect when a variable has been tagged on to a route during component load?
App.vue
<template>
<router-view></router-view>
</template>
<script>
import Vue from 'vue'
export default {
name: 'app'
}
</script>
index.js
import Vue from 'vue'
import Router from 'vue-router'
import MyView from '#/views/MyView'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
redirect: '/home',
name: 'Home',
children: [
{
path: '/mycomponent',
name: 'MyComponent',
component: MyComponentView
},
{
path: '/mycomponent/:id',
component: MyComponentView,
props: true
}
]}]})
mycomponent.vue
<template>
<component :is="activeComponent" :id="id"></component>
</template>
<script>
export default {
name: 'MyComponentView',
components: {
...
},
mounted: function() {
#this logs path in browser
console.log('>>mounted route: ' + this.$route.path)
},
watch: {
'$route': function () {
#this does not fire
console.log('route watcher: ' + this.$route.path)
}
},
beforeRouteUpdate (to, from, next) {
#this does not fire
console.log('>>beforeRouteUpdate')
},
data () {
return {
activeComponent: 'somecomponent'
}
}
}
</script>
component1.vue
...
mounted: function() {
Event.$on('vue-tables.row-click', function(data) {
#this logs correct information in browser
console.log('data.row.id: ' + data.row.id)
router.push({path: 'mycomponent', query: {id: data.row.id}})
})
},
...
It doesn't work because beforeRouteUpdate is in component which is going to reload (Look at Life cycle of Vue). When you change the route, watch & beforeRouteUpdate is terminated and you won't see any results. In this scenario you should provide something like this:
MainRouterView.vue
<template>
<router-view/>
</template>
<script>
name: 'MainRouterView',
beforeRouteUpdate (to, from, next) {
console.log('beforeRouteUpdate')
},
</script>
router.js
export default new Router({
routes: [
{
{
path: '/mycomponent',
name: 'MainRouterView',
component: MainRouterView,
children: [
{
path: '/mycomponent/:id',
component: SecondComponent,
}
]
},
}]})
But if you want to stick up with your structure and check the status of the current route, you can replace beforeRouteUpdate to beforeRouteEnter or beforeRouteLeave in the component. You can use global guard beforeEach in router as well.
To better understand how beforeRouteUpdate works, check out this snippet: http://jsfiddle.net/yraqs4cb/
I have this page I want to try out Vue Router with Vue Components. I cant figure out whats wrong. I am getting an error Uncaught TypeError: Cannot read property 'name' of undefined at this line const App = new Vue.extend({})
<body>
<div id="app">
<router-view></router-view>
</div>
<template id="foo"> <h1>This is homepage</h1> </template>
<template id="bar"> <h1>This is Bar page</h1> </template>
</body>
//Vue.js v1.0.28
<script src="{{ asset( 'js/vue.js' ) }}"></script>
// vue-router v0.7.13
<script src="{{ asset( 'js/vue-router.js' ) }}"></script>
<script>
const router = new VueRouter()
const App = new Vue.extend({})
router.map({
'/': {
component: {
template: '#foo'
}
},
'/bar': {
component: {
template: '#bar'
}
},
})
router.start(App, '#app')
</script>
</html>
What am I doing wrong?
EDIT:
Okay, I have managed to get this working.
const Foo = Vue.component('foo', { template: '#foo' });
const Bar = Vue.component('bar', { template: '#bar' });
Vue.use(VueRouter)
const router = new VueRouter()
router.map({
'/foo': {
component: Foo
},
'/bar': {
component: Bar
},
})
var App = Vue.extend({})
router.start(App, 'body')
What I need now is to extract those templates from index.blade.php into their own files like Foo.vue and Bar.vue. How do I do that?
I am using Webpack to compile assets.
You could try to use vue-router v.v2.2.1 and you can check this official example https://github.com/vuejs/vue-hackernews-2.0 and here router code:
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
import { createListView } from '../views/CreateListView'
import ItemView from '../views/ItemView.vue'
import UserView from '../views/UserView.vue'
export default new Router({
mode: 'history',
scrollBehavior: () => ({ y: 0 }),
routes: [
{ path: '/top/:page(\\d+)?', component: createListView('top') },
{ path: '/new/:page(\\d+)?', component: createListView('new') },
{ path: '/show/:page(\\d+)?', component: createListView('show') },
{ path: '/ask/:page(\\d+)?', component: createListView('ask') },
{ path: '/job/:page(\\d+)?', component: createListView('job') },
{ path: '/item/:id(\\d+)', component: ItemView },
{ path: '/user/:id', component: UserView },
{ path: '/', redirect: '/top' }
]
})