文章/答案/技术大牛

发布

社区首页 >问答首页 >Vue路由器链接在url中添加对象

问Vue路由器链接在url中添加对象
EN

Stack Overflow用户

提问于 2018-02-23 10:32:23

回答 1查看 3.3K关注 0票数 1

这是我的背景：

main.js创建一个vue并将组件应用程序附加到dom中的一个元素
router.js设置路由
App.vue有router-view和一些router-link

问题：

链接<router-link to="/admin">Admin1</router-link>运行良好
链接<router-link to="{name: 'admin'}">Admin2</router-link>不工作，并添加到url栏：#/{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

Stack Overflow用户

发布于 2018-02-23 10:35:02

为了使您的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

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48945778

复制

相似问题

问Vue路由器链接在url中添加对象
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue路由器链接在url中添加对象EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Vue路由器链接在url中添加对象
EN