使用vue-router

使用路由应该完成以下步骤:


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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容