手把手教你用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 条评论
登录 后参与评论

相关文章

来自专栏武军超python专栏

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

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

912
来自专栏北京马哥教育

Python 爬取CSDN的极客头条

这两周花了点时间读了《Python网络数据采集》,内容不多,不到200页,但是非常丰富,有入门,有提高,有注意事项,有经验之谈,有原理,有分析,读完受益匪浅。书...

3908
来自专栏软件开发

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

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

2489
来自专栏程序员的碎碎念

JavaGUI编程之·引用类库Beautyeye改变外观

上一期讲到JavaGUI默认界面在win7上显示得比较粗糙,小编在原来的基础上对各种组件的属性进行大量修改才得以让原界面扁平化。上期推文发出后,就有大神提供建议...

9969
来自专栏前端知识分享

第130天:移动端-rem布局

当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了。移动端的布局相对PC较为简单,关键在于对不同设备的适...

3234
来自专栏C语言及其他语言

Dev-Cpp使用入门教程

今天给大家开始介绍Dev-C++这款编译器的使用方法,由于蓝桥杯竞赛的要求,今天给大家做入门介绍。 ? 下载地址依旧见:C/C++开发编译器等常用工具下载htt...

3144
来自专栏分布式系统和大数据处理

HTML5触摸界面设计与开发

首先讲了移动端和电脑端的一些不同,讲到了viewport的概念和相关的虚拟像素、媒体查询,借助媒体查询来实现横屏、竖屏的区别显示。

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

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

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

6382
来自专栏葡萄城控件技术团队

JavaScript 性能优化技巧分享

JavaScript 作为当前最为常见的直译式脚本语言,已经广泛应用于 Web 应用开发中。为了提高Web应用的性能,从 JavaScript 的性能优化方向入...

3414
来自专栏程序员同行者

html基础+常用标签

1391

扫码关注云+社区