vue入门之router路由

router也称为路由,通过简单的配置,可以根据不同的路径访问不同的页面。

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

vue入门之router路由

 

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

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

 

1.在views目录下创建 Info.vue

  1. <template>
  2.   <div>
  3.     <p class="tips">this is a info component</p>
  4.   </div>
  5. </template>
  6. <script>
  7. </script>
  8. <style scoped>
  9.   .tips {
  10.     color: red;
  11.   }
  12. </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';  
  5. Vue.use(Router);
  6. export default new Router({
  7.   mode: 'history',
  8.   base: process.env.BASE_URL,
  9.   routes: [
  10.     {
  11.       path: '/',
  12.       name: 'home',
  13.       component: Home,
  14.     },
  15.     {  
  16.       path: '/info',  
  17.       name: 'info',  
  18.       component: Info,  
  19.     },  
  20.     {
  21.       path: '/about',
  22.       name: 'about',
  23.       // route level code-splitting
  24.       // this generates a separate chunk (about.[hash].js) for this route
  25.       // which is lazy-loaded when the route is visited.
  26.       component: () => import(/* webpackChunkName: "about" */ './views/About.vue'),
  27.     },
  28.   ],
  29. });

添加了第4行和17-21行

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

 

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

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

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
言曌

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: