美文网首页
使用vue-router

使用vue-router

作者: 九亿girls的梦 | 来源:发表于2019-03-20 10:55 被阅读0次

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


    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>
    

    相关文章

      网友评论

          本文标题:使用vue-router

          本文链接:https://www.haomeiwen.com/subject/smaamqtx.html