手把手教你用vue-cli构建一个简单的路由应用

上一章说道:十分钟上手-搭建vue开发环境(新手教程)https://www.jianshu.com/p/0c6678671635

开发环境搭建好之后,那么开始新添加一些页面,构建最基本的vue项目,本章会手把手教你用vue-cli构建一个简单的路由应用。

1:启动项目,启动之后,第一个vue项目环境搭建成功

npm run dev

图片.png

2:创建后目录结构如下:

图片.png

3:开始增加自己的文件,目录结构如下,dist是打包后生成的,不需要新建,components存放组件,common存放了公用的组件头部和底部,router存放路由配置文件。

用 Vue.js + vue-router 创建单页应用,是非常简单的。使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将组件(components)映射到路由(routes),然后告诉 vue-router 在哪里渲染它们。下面是一个基本例子:

4:开始创建四个组件 ,分别命名为abcd.vue页面

图片.png

5:然后在router index.js文件里面定义路由

图片.png

index.js 代码

import Vue from 'vue'
import Router from 'vue-router'
/*import HelloWorld from '@/components/HelloWorld'*/

import a from '@/components/a'
import b from '@/components/b'
import c from '@/components/c'
import d from '@/components/d'

Vue.use(Router)

export default new Router({
    routes: [
        /*  {
            path: '/',
            name: 'HelloWorld',
            component: HelloWorld
          },*/
        {
            path: '/a',
            name: 'a',
            component: a
        },
        {
            path: '/b',
            name: 'b',
            component: b
        },
        {
            path: '/c',
            name: 'c',
            component: c
        },
        {
            path: '/d',
            name: 'd',
            component: d
        }
    ]
})

6:在app.vue中使用router-link做跳转

图片.png

app.vue代码

<template>
    <div id="app">

        <div class="list-group">

            <div class="navbottom">
                <router-link to="a">跳转1</router-link>
            </div>

            <div class="navbottom">
                <router-link to="b">跳转2</router-link>
            </div>

            <div class="navbottom">
                <router-link to="c">跳转3</router-link>
            </div>
            <div class="navbottom">
                <router-link to="d">跳转4</router-link>
            </div>

        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'app'
    }
</script>

<style>
    #app {
        font-family: 'Avenir', Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }
    
    .list-group {
        position: absolute;
        bottom: 0;
    }
    
    .navbottom {
        width: 5rem;
        float: left;
    }
</style>

7:注意,这段代码用来盛放a,b,c,d,页面的信息<router-view></router-view>

图片.png

图片.png

8:最终效果如下,点击路由,跳转到不同的页面。OK,手把手教你用vue-cli构建一个简单的路由应用,没错,就是这么的简单。

图片.png

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,爱折腾。 坚持总结工作中遇到的技术问题,坚持记录工作中所所思所见,私信回复1,拉你进前端技术交流群

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员同行者

html基础+常用标签

20710
来自专栏武军超python专栏

2018年8月7号升级飞机大战的总结

今天学到的新单词: indentation  n缩进 transform  v改变,变换 collide v碰撞 recursion  n递归

13320
来自专栏我和我大前端的故事

入门微信小程序 (二)语法篇

路由在项目开发中一直是个核心点,小程序路由方面经过很好的封装,提供了几个基本的跳转方法(这三个基本够用)

1.4K20
来自专栏张善友的专栏

谷歌发布 AngularJS 1.0,允许扩展HTML语法

谷歌2012年06月15日发布了一个全新的Web模板——AngularJS 1.0。 ? 谷歌称, AngularJS可以让你扩展HTML的语法,以便清晰、简洁...

22850
来自专栏ROBOTEDU

OMRONFZ系列视觉与ABB机器人的通信

ABB与OMRON之间的通信,本例采用以太网TCP无协议模式通信。通过以太网由ABB机器人程序控制ONRON视觉的场景切换,拍照判断及其判断数据的 接收。 ?...

53350
来自专栏ytkah

微信小程序开发教程!博卡君第二弹【微信小程序项目结构以及配置】

前面我们转了博卡君通宵吐血赶稿的微信小程序开发教程,当时只更新了两章,现在接着发布第三章:微信小程序项目结构以及配置,第四章:微信小程序首页面开发,以下是微信小...

38240
来自专栏软件开发

CSS3与页面布局学习总结(八)——浏览器兼容与前端性能优化

一、浏览器兼容 1.1、概要 世界上没有任何一个浏览器是一样的,同样的代码在不一样的浏览器上运行就存在兼容性问题。不同浏览器其内核亦不尽相同,相同内核的版本不同...

31390
来自专栏老九学堂

【干货】最全的JavaScript调试技巧总结,必看!

调试技巧,在任何一项技术研发中都可谓是必不可少的技能。掌握各种调试技巧,必定能在编码中起到事半功倍的效果。譬如,快速定位问题、降低故障概率、帮助分析逻辑错误等等...

39170
来自专栏Fundebug

微信小程序开发BUG经验总结

小程序开发越来越热,开发中遇到各种各样的bug,在此总结了一些比较容易掉进去的坑分享给大家。

581120
来自专栏IT大咖说

2018年1月份最热门的JavaScript开源项目

本篇文章为大家盘点了1月份最热门的 JavaScript 项目,让我们一起来看下吧! 一、编辑器tui.editor https://github.com/nh...

31180

扫码关注云+社区

领取腾讯云代金券