如何在无服务器 Vue SPA 中实现永久链接

Question

我做了 this little app which is a simple Vue serverless SPA. I wish to pass an array of strings and a an array of numbers through the URL so that I can share "states" of the websites with colleagues. I understand vue-routercan update the route's parameters as per their documentation，但我没有足够的视角来了解如何实施它来解决我的问题。我会喜欢一些帮助或指导，所以我实际上从中学习。谢谢大家

编辑：根据 Luis Brito 先生的提示。我将以下内容添加到我的代码 (props)

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: require('@/views/Home').default,
      props: { myNumbers: [1,2,3]}
    },
  ]
})

在我做的一个组件中

mounted () {
  this.$router.push({ name: 'myNumbers', params: {myNumbers: [1,2,3,4] }})
  const myNumbers = this.$route.params.myNumbers
  console.log(myNumbers);
}

但现在我的应用程序抛出 Vue-Router 错误 [vue-router] Route with name 'myNumbers' does not exist 但它确实会在控制台记录我推送的数字。是否有可能让我的应用程序寻找道具，并且只有当它们在那里对它们做某事时才可以？否则我会得到一个白屏。

Answer 1

我看到解决这个问题的方法是使用 vue-router 和一个将 props 传递给组件的路由，prop 可以是一个包含两个数组的对象提到。

参考 Vue Router - Obect Mode

这里是路由器的例子：

const routes = {
  path: '/promotion/from-newsletter',
    component: Promotion,
    props: { myNumbers: [1,2,3,5,8], myStrings: ['first', 'second', 'third'] 
  }
}

在组件方面，您可以在 created() 生命周期挂钩上访问那些 props，或者 mounted()

props: ['myNumbers','myStrings '],
mounted() {
   if ( this.myNumbers !== undefined && this.myStrings !== undefined ) {
      console.log(thys.myNumbers, this.myStrings);
   }
}

这样 http://localhost:8080/?myStrings=layer1,layer2,layer3&myNumbers=-1,2,3-4 将控制日志层 1-3 和数字。

已编辑

要以编程方式传递值，最好使用 Function Mode 来捕获 URL 参数并将其传递给组件。另一种方法是创建一个组件，您可以在其中输入所需的数字和字符串，然后调用路由器并将这些值传递给最终目标组件的路由。

如何在无服务器 Vue SPA 中实现永久链接

How to implement permalinks in a serverless Vue SPA

url

vue.js

vue-router