Vue.js路由router能在组件中使用吗

Question

在content.vue组件中使用

<template>
<div class="content">
  <div class="tab">
    <div class="item">
      <router-link to="/a">商品</router-link>
    </div>
    <div class="item">
      <router-link to="/b">评价</router-link>
    </div>
    <div class="item">
      <router-link to="/c">商家</router-link>
    </div>
  </div>
  <div class="con">
    <router-view></router-view>
  </div>
</div>
</template>

我想在下面的js中直接写

const A = {
  template:"<span>A</span>"
}

const B = {
  template:"<span>B</span>"
}

const C= {
  template:"<span>C</span>"
}
Vue.use(VueRouter);


const router = new VueRouter({
  routes: [
    {path: "/a" ,component: A},
    {path: "/b" ,component: B},
    {path:"/c",component: C}
      ]
    })
    
    
    

结果不行，js只能在mean.js里写吗？小白希望前辈带我飞》》》》蒙逼中

Answer 1

你想说的是main.js吧？

是的，必须在main.js里实现，因为router是需要装载到vue实例上的，直接在组件里写router的定义没有用。

请参考（来自官方文档）：

const app = new Vue({
  router
}).$mount('#app')

Answer 2

可以使用的，我介意可以拆分成多个文件来使用
可以参考我之前写的文章，有问题可以文章里评论或追问?
vue2.0一起在懵逼的海洋里越陷越深（二）
vue2.0一起在懵逼的海洋里越陷越深（三）

Answer 3

我也是同问，一起蒙蔽