Vue路由器和动态路由：不起作用答案

【问题标题】：Vue-router and dynamic routes: not workingVue路由器和动态路由：不起作用
【发布时间】：2018-08-15 16:22:30
【问题描述】：

我正在使用下一条路线：

{
  path: '/test/:name',
  name: 'Test',
  component: Test,
  // props: true,
  secure: false
}

当我尝试在 Chrome 的 Vue 扩展中访问路由 http://myapp/test/helloworld 时，我发现该路由不匹配。但是在测试时我发现路由http://myapp/test/:name（是的，带有冒号和参数名称）组件已加载。该组件是匿名且简单的：

let Test = { template: '<div>sd {{ $route.params.name }}</div>' }

【问题讨论】：

取消注释 props 属性。
你如何导航到路线？

标签： vue.js vue-router

【解决方案1】：

这是一个使用编程和声明方式进行导航的工作示例，检查您是否遗漏了什么。

另外，如果你通过 JS 进行导航，为了将参数传递给 router.push()，你需要通过 name prop 引用组件，而不是路径

const Test = {
  template: `<div> {{ $route.params.name }}</div>`
}

const router = new VueRouter({
  routes: [
    { path: '/test/:name', component: Test, name:'test' }
  ]
})

const app = new Vue({
  router,
  methods: {
    fromJS () {
      this._router.push({ name: 'test', params: { name: 'doe' }})
    }
  }
 }).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

<div id="app">
  <p>
    <router-link to="/test/john">John</router-link>
    <router-link to="/test/doe">Doe</router-link>
    <button @click="fromJS">To doe from JS</button>
  </p>
  <router-view></router-view>
</div>

【讨论】：

也许你能帮助我。看看这个：stackoverflow.com/questions/57836601/…

【解决方案2】：

对不起，这是我的错误。我在路由器 js 文件的底部得到了下一个 sn-p：

router.beforeEach((to, from, next) => {
  router.options.routes.forEach((value, key) => {
    if (value.path.localeCompare(to.path) === 0) {
      if (value.secure === false || store.getters.getLogInStatus === true) {
        next()
      } else if (value.secure === true && store.getters.getLogInStatus === false) {
        router.push({
          'name': 'Login'
        })
      }
    }
  })
})

这里第三行是发生错误的地方，因为 /test/:name 与 /test/anyname 不匹配。

【讨论】：