1、第一种使用方法
组件引用要与 router/index.js 下的路径相对应,例如:
router/index.js 声明方式:

router/index.js 声明
组件调用方式:

UserGame.vue组件
注: router/index.js 下红色框 name:"UserGame" 与 UserGame.vue 组件下的 router-link 中引用的 :to='{name: "UserContent"}' 的 name 属性的值要相对应。
2、直接引用
组件引用要与 router/index.js 下的 path 属性的值相对应,例如:
router/index.js 声明方式:
import Vue from 'vue'
import Router from 'vue-router'
import HomeIndex from '@/components/home/index';
import ItemIndex from '@/components/item/index';
import ScoreIndex from '@/components/score/index';
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HomeIndex',
component: HomeIndex
},
{
path: '/item',
name: 'ItemIndex',
component: ItemIndex
},
{
path: '/score',
name: 'ScoreIndex',
component: ScoreIndex
}
]
});
组件调用方式:
<router-link to="item" class="start button_style" ></router-link>
注: router/index.js 下 path: '/item', 与 组件下的 router-link 中引用的 to="item" 的值要相对应。