Question

我正在使用下一条路线：

{
  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>' }

Answer 1

这是一个使用Programmatic和Declarative方式进行导航的工作示例，检查是否遗漏了某些内容。

此外，如果您通过JS进行导航，为了将params传递给router.push（），您需要通过名称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>

Answer 2

对不起，这是我的错。我得到了路由器js文件底部的下一个片段：

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。

Vue路由器和动态路由：不工作

2 个答案: