Vuejs：访问特定 URL 段

Question

我有一个 route/URL :

Ex. http://localhost:8080/qr-codes

我想访问第一段

qr-codes

我该怎么做？

我曾经在 Laravel

中可以这样做

Request::segment(1);

Answer 1

使用URL.pathname and String#split：

const str = 'http://localhost:8080/qr-codes';

const firstSegment = (new URL(str)).pathname.split('/')[1];

console.log(firstSegment);

Vue 演示：

new Vue({
  el: "#app",
  computed: {
    path: function() {
      const firstSegment = (new URL(window.location.href)).pathname.split('/')[1];
      return `${firstSegment}/create`;
    }
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">{{path}}</div>

Answer 2

const getUrlPathSegments = () => (
  (new URL(window.location.href)).pathname.split('/').filter(Boolean)
)

例如，当您在当前 Whosebug 页面上调用该函数时，您将得到：

getUrlPathSegments() === ['questions', '70427242', 'vuejs-accessing-specific-url-segment']

getUrlPathSegments()[0] === 'questions'

Vuejs：访问特定 URL 段

Vuejs : Accessing Specific URL Segment

javascript

vue.js

vue-router

vue-component

vuejs2