How to pass url parameters to Vuejs

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/

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.

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      })    }  ]})