使用路由应该完成以下步骤:
1、Vue.use(Router) 作用:挂载一些方法,如this.$router等。
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);
2、new Router(config) 作用:创建路由实例,并为每个页面配置对应url。
import component1 from '@/components/component1'
export default new Router({
routes: [
{
path: '/path1/:id',
name: 'path1',
component: component1
}
]})
3、new Vue({router}) 作用: 把路由作为组件注册到(根)vue实例中。
import router from './routers/index'
const app = new Vue({
router,
});
4、<router-view/> 作用:在根实例的内部中使用路由组件,路由组件可以在根实例的内部vue实例中再次使用,形成多级路。
<app>
<router-view/> //->1级路由。假如以下的页面page1是这个路由映射的
</app>
<page1> //假如这个页面是上面的路由映射的
<router-view/> //->2级路由。再映射其它页面
</page1>