1、第一种使用方法
组件引用要与 router/index.js
下的路径相对应,例如:
router/index.js
声明方式:
组件调用方式:
注: 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"
的值要相对应。