首页 文章

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

提问于
浏览 次
0

这是我的设定：

  • main.js 创建一个vue并将组件App附加到dom中的元素

  • router.js 设置路径

  • App.vue 有 router-view 和几个 router-link

问题：

  • 链接 <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>
vue.js

1 回答

  • 2

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

    你也应该使用 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

    回复于

相关问题