上篇文章我们用vue-cli脚手架工具做了个简单的hello world页面,但是我们破坏了原来的流程,而正常的访问页面应该是通过路由来实现的。

那么什么是路由呢?

路由就是通过不同的url来访问不同的内容。

下面我们就通过路由来访问不同的页面吧~~~

我们用vue-cli新建个项目test1。并运行;

如上图可以访问到默认的欢迎页面。

那么这个页面在vue中是怎么组成的呢?可以分析一下:

先看App.vue这个入口组件。

再来看Hello.vue这个组件。

好了,这个欢迎页面我们基本分析清楚了,那么路由又是如何工作的呢?

1.我们在components下面新建个Helloworld组件。Helloworld.vue代码如下:

<!--模板部分-->
<template>
<div class="container">
<h1>hello,world!</h1>
<p>{{test}}</p>
</div>
</template>
<!--js部分-->
<script>
export default {
name: 'helloworld',
data() {
return {
test: 'this is a test'
};
}
}
</script>
<!--样式部分-->
<style>
.container {
background: #aaa;
color: blue;
}
</style>

2.把Helloworld.vue组件加入到router下面的index.js中的路由。index.js代码如下:

import Vue from 'vue'
import Router from 'vue-router'
import Hello from '@/components/Hello'
import HelloWorld from '@/components/Helloworld'//我们新定义的组件 Vue.use(Router) export default new Router({
routes: [
{
path: '/',
name: 'Hello',
component: Hello
},
{//新路由
path: '/helloworld',
name: 'HelloWorld',
component: HelloWorld
}
]
})

3.main.js代码如下:

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'//index.js会自动寻找到,也可以写全(import router from './router/index') Vue.config.productionTip = false /* eslint-disable no-new */
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})

4.我们在浏览器地址栏输入http://localhost:8080,正常应该是显示首页;然后我们改一下url,输入http://localhost:8080/#/helloworld,这个就是我们自定义的组件。

这个时候我们就用路由实现了两个页面之间的跳转了。

注意:在服务开始之前,打开build文件夹下的webpack.base.conf.js这个文件:我们找到module一栏,将eslint-loader这个模块屏蔽掉。因为这个是格式检查的工具,如果不关掉,它连多个空格都会提示你改,否则不让过,所以只好干掉它。如图:

vue学习记录③(路由)的更多相关文章

  1. vue学习记录④(路由传参)

    通过上篇文章对路由的工作原理有了基本的了解,现在我们一起来学习路由是如何传递参数的,也就是带参数的跳转. 带参数的跳转,一般是两种方式: ①.a标签直接跳转. ②点击按钮,触发函数跳转. 在上篇文章中 ...

  2. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  3. [20190614]webpack+vue学习记录

    本文记录一些学习webpack+vue相关的知识点,方便以后查阅,添加或修改 1. 初始化vue项目的代码结构 build--项目依赖包配置信息 config--项目配置文件 dev.env.js-- ...

  4. Vue学习记录第一天

    今天开始了Vue的学习,下面我就记录一下学习了什么. 1.什么是Vue? vue是一套基于javaScript的渐进式框架,是MVVM框架.View ——ViewModel——Model  其中Vie ...

  5. vue学习之六路由系统

    一.vueRouter实现原理 VueRouter的实现原理是根据监控锚点值的改变,从而不断修改组件内容来实现的,我们来试试不使用VueRouter,自己实现路由控制,如下代码: <!DOCTY ...

  6. Vue学习记录-初探Vue

    写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...

  7. vue学习记录:vue引入,validator验证,数据信息,vuex数据共享

    最近在学习vue,关于学习过程中所遇到的问题进行记录,包含vue引入,validator验证,数据信息,vuex数据共享,传值问题记录 1.vue 引入vue vue的大致形式如下: <temp ...

  8. vue学习记录⑤(组件通信-父与子)

    今天我们看一下组件通信. 经过前面几篇文章,我们已经可以构建出完整的单个组件,并利用路由使其串联起来访问了. 但这明显还是不够的.一个页面不可能就是个单组件,一般是由多个组件合成的.正因为如此,组件之 ...

  9. vue学习记录②(hello world!)

    接着上篇vue-cli脚手架构建项目结构建好项目之后,就开始写个“hello world!”吧~~~ vue玩的都是组件,所以开发的也是组件. 1.新建helloworld.vue.(删除Hello. ...

随机推荐

  1. Framework/base 下添加自定义模块的步骤

    在Android源码编译成功的基础上,重新编译带自己API的android.jar需要进行以下几个步骤操作:1.添加自己的源代码,在android源码的frameworks/base目录下新建一个文件 ...

  2. HTML5的离线储存

    在用户没有与因特网连接时,可以正常访问站点或应用,在用户与因特网连接时,更新用户机器上的缓存文件.        原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技 ...

  3. ASP.NET Core学习之四 在CentOS上部署.net core

    一.安装CentOs 以前在大学学过linux,但是对命令行总是有一种深深的排斥感,几年之后,还是又回来了. 1.下载 现在没法FQ,就算是FQ网速也是蜗牛一样慢,我使用阿里云的镜像站进行下载速度还是 ...

  4. web plugins

    <build> <resources> <resource> <directory>src/main/java</directory> &l ...

  5. Python3练习题系列(09)——物以类聚,人以群分

    目标: 用类管理同类事物 解析: 用到“class”的编程语言被称作“Object Oriented Programming(面向对象编程)”语言.首先你需要做出“东西”来,然后你“告诉”这些东西去完 ...

  6. [NewCode 6] 重建二叉树

    题目描述 输入某二叉树的前序遍历和中序遍历的结果,请重建出该二叉树.假设输入的前序遍历和中序遍历的结果中都不含重复的数字.例如输入前序遍历序列{1,2,4,7,3,5,6,8}和中序遍历序列{4,7, ...

  7. Java基础—异常

    一.概念 异常是程序中的一些错误,但并不是所有的错误都是异常,并且错误有时候是可以避免的. 异常体 Throwable:所有异常类的超类  Error:它表示不希望被程序捕获或者是程序无法处理的错误 ...

  8. keynote代码高亮【转】

    码农即使做ppt,也离不开代码,在keynote下,如果要粘贴代码,如何做到语法高亮呢? 补充1,该功能由pygments提供支持,所以支持的语言见:http://pygments.org/langu ...

  9. 【bzoj3672】购票

    Portal -->bzoj3672 Solution 天知道我是怎么调完的qwq调到天昏地暗系列.. ​ 不管这么多,先尝试列一个最简单的状态转移方程 用\(f[i]\)表示\(i\)点到\( ...

  10. 字体渲染技术(字体抗锯齿技术) -webkit-font-smoothing: antialiased;

    1.-webkit-font-smoothing控制的字体渲染只对MacOS的webkit有效.所以,你在MacOS测试环境下面设置-webkit-font-smoothing时,只要你不把它设置为n ...