前面在说到vue-router的时候,都是用最简单的方式说明用法的,但是在实际项目中可能会有所出入,所以,今天就结合vue脚手架来展示项目中的vue-router的用法。

创建项目

首先需要使用脚手架创建一个项目,这里选择的是webpack-simple这个模板。

1,执行命令:vue init webpack-simple cli-router就可以

2,npm install 下载相关依赖

3,npm run dev运行项目。

此时我们可以看到浏览器中自动新开的页面:

新建组件

和前面例子一样,我们需要新建两个组件用于路由跳转,按照习惯,这里在src文件夹下面新建一个用于存放组件的文件夹components,在这个文件夹下面新建两个个组件Home.vue和News.vue,并添加基本信息。

  

安装并配置路由

在以前是直接引入js包的,现在则是通过npm来下载,只需要在项目的根目录执行命令:npm  install  vue-router --save即可。

下载完毕后,需要进行路由配置,在实际项目中,路由会比较多,所有通常的做法是将路由配置单独提出来,所以这里先在src文件夹下面新建一个文router.config.js进行路由配置:

这里是将配置的路由放置在一个数组里面,然后需要在入口文件main.js中引入这个数组。在引入前,先需要引入上面下载的路由,

页面渲染

在完成前面的步骤后,我们需要将匹配的路由进行渲染,在App.vue页面中,先将之前默认生成的内容删掉,然后再使用<router-link>标签,和前面的用法基本一样。

完成后,重新运行项目。

 

使用动画

前面在过渡中使用过一个角animate.css的动画库,其实,在路由中也可以使用,使用前需要先将资源引入进来,

首先在src文件夹下面的assets这个文件夹下面新建一个文件css文件,然后将前面下载的animate.css放在css文件夹下面。

然后在main.js中引入这个样式文件

有的版本中直接这样引入外部样式的时候会报下面的这样的错误

这是因为项目中缺少css-loader和style-loader,所以需要在项目跟目录中执行命令 npm intsall css-loader style-loader --save-dev来下载相关依赖,然后在webpack.config.js中进行配置。

如果上面的不报错,再继续在需要使用动画的位置进行添加动画组件和动画样式就可以了。

此时就实现了最基本的路由配合脚手架和动画的项目了。

完整代码下载:点这里

vue-router配合vue-cli的实例的更多相关文章

  1. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  2. vue router 配合transition 切换动画

    把<router-view>嵌套在<transition>里,路由变化的时候,vue会为包裹页面的div增加动画样式,我们要做的就是监听路由变化.定义这些动画样式,以规定页面到 ...

  3. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  4. 「进阶篇」Vue Router 核心原理解析

    前言 此篇为进阶篇,希望读者有 Vue.js,Vue Router 的使用经验,并对 Vue.js 核心原理有简单了解: 不会大篇幅手撕源码,会贴最核心的源码,对应的官方仓库源码地址会放到超上,可以配 ...

  5. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  6. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

  7. Vue系列:Vue Router 路由梳理

    Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...

  8. [Vue 牛刀小试]:第十三章 - Vue Router 基础使用再探(命名路由、命名视图、路由传参)

    一.前言 在上一章的学习中,我们简单介绍了前端路由的概念,以及如何在 Vue 中通过使用 Vue Router 来实现我们的前端路由.但是在实际使用中,我们经常会遇到路由传参.或者一个页面是由多个组件 ...

  9. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  10. Vue Router路由管理器介绍

    参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...

随机推荐

  1. Automatic Text Difficulty Classifier Assisting the Selection Of Adequate Reading Materials For European Portuguese Teaching --paper

    the system uses existing Natural Language Processing (NLP) tools, a parser and an hyphenator, and tw ...

  2. Java异常处理的方法

    1.异常概述在程序中,错误可能产生于程序员没有预料到的各种情况,或者是超出了程序员可控制范围的环境因素,如用户的坏数据.试图打开一个根本不存在的文件等.在Java中这种在程序运行是可能出现的一些错误称 ...

  3. dp 优化 F2. Pictures with Kittens (hard version)

    dp的优化可能是自己的弱项吧 F1中n*n*n的复杂度强行过去了 F2就无能为力了: 状态转移 dp[ i ] [ j ] 第一个i存的是位置 1-n;    j是放入数字的个数 然后F1就暴力过去了 ...

  4. POJ1417 True Liars

    题意 Language:Default True Liars Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 6392 Accep ...

  5. C#中如何实现json转化时只处理部分属性

    把对象转化为json字符串,很常用,但如果因为现在大部分项目都是用了ORM映射,导致一个对象的属性特别多,如果前台只需要部分属性如何实现? 当然最简单是所有属性都json化,前台只处理需要的属性,多余 ...

  6. iuplua test failure

    prepared SW  Download from https://sourceforge.net/projects/iup zerobrane Step Write follwiing codes ...

  7. AIX系统日志

    1.系统错误日志 存放路径:/var/adm/ras/errlog 说明:该日志记录了系统所检测到的软硬件故障和错误,尤其对系统的硬件故障有很大的参考价值,是AIX提供的最有价值的日志之一, errl ...

  8. hbase 相关

    ----------------------------------------hbase的 安装---------------------------------------- 本地安装: 1 解压 ...

  9. bzoj 2739 最远点——分治处理决策单调性

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2739 分治处理决策单调性的思想就是先找到一个询问,枚举所有可能的转移找到它的决策点,那么这个 ...

  10. app崩溃后自动重启

    android 引用:http://blog.csdn.net/caiwenfeng_for_23/article/details/41184353 package com.tan.abnormalr ...