前端培训之vue-router

1.理解

1.1. 说明
1) 官方提供的用来实现 SPA 的 vue 插件

2) github:https://github.com/vuejs/vue-router

3) 中文文档:http://router.vuejs.org/zh-cn/

4) 下载:npminstallvue-router–save

1.2. 相关 API 说明
1) VueRouter(): 用于创建路由器的构建函数

     newVueRouter({

        // 多个配置项

})

2) 路由配置

routes:[

      {// 一般路由

           path:’/about’,

          component:About

     },

     {// 自动跳转路由

          path:’/’,

         redirect:’/about’

     }

]

3) 注册路由器

importrouterfrom’./router’

     newVue({

         router

   })

4) 使用路由组件标签

1.<router-link>: 用来生成路由链接

        <router-linkto=”/xxx”>GotoXXX</router-link>

2.<router-view>: 用来显示当前路由组件界面

      <router-view></router-view>
2.基本路由
2.1. 效果
基本路由.gif

2.2. 路由组件
Home.vue

About.vue
2.3. 应用组件:App.vue
<div>
<!–路由链接–>

        <router-linkto=”/about”>About</router-link>

       <router-linkto=”/home”>Home</router-link>

        <!–用于渲染当前路由组件–>

        <router-view></router-view>
</div>
2.4. 路由器模块:src/router/index.js
exportdefaultnewVueRouter({

        routes:[

     {

        path:’/’,

        redirect:’/about’

    },

   {

      path:’/about’,

     component:About

   },

  {

     path:’/home’,

    component:Home

       }

  ]

})

2.5. 注册路由器:main.js
importVuefrom’vue’

importrouterfrom’./router’

// 创建 vue 配置路由器

          newVue({

         el:’#app’,

         router,

        render:h=>h(app)

})
2.6. 优化路由器配置
linkActiveClass:’active’,// 指定选中的路由链接的 class
2.7. 总结: 编写使用路由的 3 步
1) 定义路由组件

2) 注册路由

3) 使用路由

<router-link>

<router-view>


上一篇:
下一篇:
关于尚硅谷
教育理念
名师团队
学员心声
资源下载
视频下载
资料下载
工具下载
加入我们
招聘岗位
岗位介绍
招贤纳师
联系我们
电话:010-56253825
邮箱:info@atguigu.com
地址:北京市昌平区宏福科技园综合楼6层(北京校区)

 深圳市宝安区西部硅谷大厦B座C区一层(深圳校区)

上海市松江区谷阳北路166号大江商厦6层(上海校区)