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' }
]
})
Related
if (success) {
context.bookingData.city = context.city;
context.bookingData.departureFlightDate = context.departureFlightDate;
context.bookingData.arrivalFlightDate = context.arrivalFlightDate;
context.bookingData.idParkingService = context.idParkingService;
context.bookingData.Price = context.bookings.price.items.data.price;
//const booking = JSON.stringify(context.bookingData);
context.addBookingData(context.bookingData);
context.$router.push({
path: "parkplatz-buchen-schritt-2",
});
}
how to open this path in new window or tab at the same time I have to pass context data to the destination
To open the route in a new window
Home.vue
<template>
<button v-on:click="openInNewWindow()">Open in new window</button>
</template>
<script>
export default {
methods: {
openInNewWindow(){
let routeData = this.$router.resolve({
path: '/about',
query: {
city : 'test',
departureFlightDate : 'test',
arrivalFlightDate : 'test',
idParkingService : 'test',
price : 'test'
}
});
window.open(routeData.href, '_blank');
}
}
}
</script>
Router
import Home from '../views/Home.vue'
import About from '../views/About.vue'
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
export default router
About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
{{this.$route.query.city}}
</div>
</template>
<script>
export default {
mounted(){
console.log(this.$route.query)
}
}
</script>
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'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 })
}
]
})
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.
I am doing very simple page with url's switching. In one of url I need to call #click methods. Here is my code:
const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const Faq = { template: '<p>Faq page</p>' }
const Book = { template: `
<div>
<button #click="foo()">test</button>
</div>
` }
const routes = [
{path: '/', component: Home},
{path: '/book', component: Book},
{path: '/faq', component: Faq}
]
const router = new VueRouter({
routes // short for `routes: routes`
})
new Vue({
el: '#app',
router,
data: {
},
methods:
{
foo()
{
console.log("ffffff");
}
}
})
But I am getting error: Property or method "foo" is not defined on the instance but referenced during render.
Because you're trying to define child component(book)'s method in parent component. Please just move methods property from parent component to child component.
Here's a sample.
const NotFound = { template: '<p>Page not found</p>' }
const Home = { template: '<p>home page</p>' }
const Faq = { template: '<p>Faq page</p>' }
const Book = { template: `
<div>
<button #click="foo()">test</button>
</div>
`
, methods: // <-- here you go
{
foo()
{
console.log("ffffff");
}
}}
const routes = [
{path: '/', component: Home},
{path: '/book', component: Book},
{path: '/faq', component: Faq}
]
const router = new VueRouter({
routes // short for `routes: routes`
})
Vue.use(VueRouter);
new Vue({
el: '#app',
router,
data: {
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.2/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue-router/2.7.0/vue-router.min.js"></script>
<div id="app">
<router-link :to="{ path: '/' }">Home</router-link>
<router-link :to="{ path: '/faq' }">FAQ</router-link>
<router-link :to="{ path: '/book' }">book</router-link>
<router-view></router-view>
</div>