Question

这是我的设置：

main.js创建一个vue并将组件App附加到dom
router.js设置路线
App.vue包含router-view和一些router-link s

问题：

链接<router-link to="/admin">Admin1</router-link>正常
链接<router-link to="{name: 'admin'}">Admin2</router-link>无效并添加到网址栏：#/{name: 'admin'}

我是否以错误的方式使用路由器？在我的文件下面的详细信息

main.js

import Vue from 'vue'
import router from './router'
import App from './App'

new Vue({
  router,
  el: '#app',
  components: { App },
  template: '<App/>',
  data: {
  }
})

router.js

import Vue from 'vue'
import Router from 'vue-router'

import HelloWorld from '@/components/HelloWorld'
import Marketplace from '@/components/Marketplace'
import Admin from '@/components/Admin'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/marketplace',
      name: 'marketplace',
      component: Marketplace
    },
    {
      path: '/admin',
      name: 'admin',
      component: Admin
    }
  ]
})

App.vue

<template>
  <div id="app">
    <p>
      <router-link to="/">Home</router-link>
      <router-link to="/admin">Admin1</router-link>
      <router-link to="{name: 'admin'}">Admin2</router-link>
    </p>
    <router-view/>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

Answer 1

为了让to="{name: admin}"无需添加字符#即可工作，请在路由器配置文件中执行以下操作。

此外，您应该使用v-bind to=""。

使用v-bind:to="{name: 'admin'}"或:to="{name: 'admin'}"

示例：

export default new Router({
  mode: 'history',
  // whatever you have
})

来源：https://router.vuejs.org/en/essentials/history-mode.html

Vue路由器链接在URL中添加对象

1 个答案: