How to pass url parameters to Vuejs

Question

I'm building an app with laravel and VueJs and I was wondering how to pass a url parameter like the user slug or the user id to vuejs in a proper way to be able to use that parameter for making ajax requests?

For example when someone clicks on a link leading to

domain.com/user/john-appleseed

I want to make an ajax request within my vuejs application with the slug 'john-appleseed' as a parameter.

What is the "right/proper" way to this?

Thanks in advance!

Answer 1

vue-router would probably be of help here. It lets you define your routes like so:

router.map({
    '/user/:slug': {
        component: Profile,
        name: 'profile'
    },
})

Within your Profile component, the requested user's slug would then become available under this.$route.params.slug

Check the official documentation for details: http://router.vuejs.org/en/

Answer 2

I suppose you are building a component. Let's say, you have a button inside that component and when is clicked, you wanna perform an action (AJAX request, or just redirect).

In this case you pass the URL as parameter to the component and you can use it inside.

HTML:

<my-component login-url="get_url('url_token')">

Your component JS:

export default {
    props: {
        loginUrl: {required: true},
    },
    ...
}

Then you can access the param in the component as this.loginUrl .

Please notice that param name difference in HTML part as dash-notatinon and in JS as camelCase.

Answer 3

If you are using vue-router and want to capture query parameters and pass them to props, you can do it this way.

Url being called : http://localhost:8080/#/?prop1=test1&prop2=test2

MyComponent.vue

<template>
  <div>
    {{prop1}} {{prop2}}
  </div>
</template>
<script>
  export default {
    name: 'MyComponent',
    props: {
      prop1: {
        type: String,
        required: true
      },
      prop2: {
        type: String,
        default:'prop2'
      }
    }
</script>
<style></style>

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import MyComponent from '@/components/MyComponent'

Vue.use (Router) 
Vue.component ('my-component', MyComponent)

export default new Router ({
  routes: [
    {
      path: '/',
      name: 'MyComponent',
      component: MyComponent,
      props: (route) => ({
        prop1: route.query.prop1,
        prop2: route.query.prop2
      })
    }
  ]
})

Answer 4

You can get the url of the link you click and then use this url to do your ajax request.

methods: {
    load: function(elem, e) {
        e.preventDefault();
        var url = e.target.href;
        this.$http.get(url, function (data, status, request) {
            // update your vue 
        });
    },
},

And in your template call this method when the user click on a link:

<a href="domain.com/user/john-appleseed" v-on="click: load">link</a>

Answer 5

either using the $route of the vue:

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})

or you can decouple it by using props

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // for routes with named views, you have to define the `props` option for each named view:
    {
      path: '/user/:id',
      components: {
        default: User,
        sidebar: Sidebar
      },
      props: {
        default: true,
        // function mode, more about it below
        sidebar: route => ({ search: route.query.q })
      }
    }
  ]
})