vue入门之router路由

avatar 2019年04月28日17:03:22 6 2287 views
博主分享免费Java教学视频，B站账号：Java刘哥 ，长期提供技术问题解决、项目定制：本站商品点此
router也称为路由，通过简单的配置，可以根据不同的路径访问不同的页面。

上一节通过 vue-cli 或 vue ui 创建好 vue 项目后，我们使用 WebStorm 导入。





访问首页可以看到有 / 和 /about 两个页面

如何添加一个新的页面呢？



1.在views目录下创建 Info.vue
  1. <template>
  2.   <div>
  3.     <p class="tips">this is a info component</p>
  4.   </div>
  5. </template>
  7. <script>
  9. </script>
  11. <style scoped>
  12.   .tips {
  13.     color: red;
  14.   }
  15. </style>



2.在router.js 里引入 Info.vue和下面js代码routes数组里复制一个元素，修改成 info 的，完整代码如下
  1. import Vue from 'vue';
  2. import Router from 'vue-router';
  3. import Home from './views/Home.vue';
  4. import Info from './views/Info.vue';  
  6. Vue.use(Router);
  8. export default new Router({
  9.   mode: 'history',
  10.   base: process.env.BASE_URL,
  11.   routes: [
  12.     {
  13.       path: '/',
  14.       name: 'home',
  15.       component: Home,
  16.     },
  17.     {  
  18.       path: '/info',  
  19.       name: 'info',  
  20.       component: Info,  
  21.     },  
  22.     {
  23.       path: '/about',
  24.       name: 'about',
  25.       // route level code-splitting
  26.       // this generates a separate chunk (about.[hash].js) for this route
  27.       // which is lazy-loaded when the route is visited.
  28.       component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
  29.     },
  30.   ],
  31. });

添加了第4行和17-21行

然后在浏览器访问 http://localhost:8080/info 就可以访问到新页面



3.为了方便几个页面跳转，在App.vue 里添加一个路由链接，方便访问

<router-link to="/info">Info</router-link>

历史上的今天
四月
28日
  • 微信
  • 交流学习，资料分享
  • weinxin
  • 个人淘宝
  • 店铺名：言曌博客咨询部

  • (部分商品未及时上架淘宝)
avatar

发表评论

avatar 登录者：匿名
匿名评论，评论回复后会有邮件通知

  

已通过评论：0   待审核评论数：0