前端培训VUE之基本路由

1. 效果
基本路由.gif
2. 路由组件
Home.vue About.vue
3. 应用组件:App.vue
<div>
     <!–路由链接–>

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

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

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

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

        routes:[

       {

          path:’/’,

          redirect:’/about’

      },

    {

      path:’/about’,

     component:About

     },

   {

     path:’/home’,

    component:Home

     }

  ]

})

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

importrouterfrom’./router’

// 创建 vue 配置路由器

newVue({ el:’#app’, router, render:h=>h(app) })
6. 优化路由器配置
linkActiveClass:’active’,// 指定选中的路由链接的 class
7. 总结: 编写使用路由的 3 步
1) 定义路由组件

2) 注册路由

3) 使用路由

<router-link>

<router-view>


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

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

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