摘要:提供了两种向组件传递参数的方式。子路由项路径不要使用开头,以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上,是通过不同的将这些资源加载后打包,然后输出打包后文件。
一、vue-router 1、简介
我们经常使用vue开发单页面应用程序(SPA)。在开发SPA过程中,路由是必不可少的部分,vue的官方推荐是vue-router。单页面应用程序看起来好像是一个页面,其实是在一个页面中切换不同的html部分,从而达到所谓的单页面,在这切换之中,就需要使用路由来实现不同的页面内容的展现。
2、基本用法 (1).使用步骤vue-router的基本使用步骤如下:
定义需要切换的组件
配置路由,规定路径到组件的映射关系
创建路由实例
将路由挂载到vue实例
//1.定义组件,用于路由切换 var Home = { template: "我是主页" } var News = { template: "我是新闻" } //2.配置路由 const routes = [{ path: "/home", component: Home },{ path: "/news", component: News },{ //这一路由配置用于首次访问或者找不到所请求路由,自动跳转home页 path: "*", redirect: "/home" }]; //3.创建路由实例 var router = new VueRouter({ routes //传入配置好的路由信息 }); //4.挂载路由到根组件 new Vue({ el: "#app", router });
这样我们就配置好了一个完整的路由。在切换组件的时候会根据路由加载不同的组件。我们使用类似a标签的
主页 新闻
这样我们就可以实现主页和新闻组件间的切换。
(2).参数传递可能我们需要向所切换组件传递参数。vue提供了两种向组件传递参数的方式。
查询字符串的形式
/home?name=dawei&pwd=666
在组件内部使用{{$route.query}}接收参数
rest风格
/news/param1/param2
在组件内部使用{{$route.params}}接收参数
(3).路由嵌套路由还可以多层嵌套使用,使用children属性。
{ path:"/user", component:User, children:[ { path:"login", component:Login }, { path:"regist", component:Regist } ] }
子路由项路径不要使用/开头,以 / 开头的嵌套路径会被当作根路径。
在组件中就可以使用该路由:
用户信息
用户登陆 用户注册
注意路径的写法。
3、路由实例的方法这里学习两个路由实例的方法:router.push()和router.replace()。
router.push():添加路由,功能上与
router.replace(): 替换路由,不产生历史记录
router.push({path:"home"}) router.replace({path:"user"})4、路由结合动画
路由结合动画使用很简单,我们可以用
二、单文件组件 1、.vue文件
.vue文件称为单文件组件,是Vue.js自定义的一种文件格式,一个.vue文件就是一个多带带的组件,在文件内封装了组件相关的代码:html、css、js代码。
.vue文件由三部分组成:、、:
//html2、vue-loader
浏览器本身并不认识.vue文件,此时需要vue-loader对.vue文件进行加载解析,。类似的loader还有许多,如:html-loader、css-loader、style-loader、babel-loader等。需要注意的是vue-loader是基于webpack的。
3、webpackwebpack是一个前端资源模板化加载器和打包工具,它能够把各种资源都作为模块来使用和处理。实际上,webpack是通过不同的loader将这些资源加载后打包,然后输出打包后文件。简单来说,webpack就是一个模块加载器,所有资源都可以作为模块来加载,最后打包输出。
三、vue-cli 1. 简介vue-cli是一个vue脚手架,可以帮助我们快速构造项目结构,减少开发人员开发阻力。vue-cli集成了多种版本:
simple :比较简单
webpack :包含ESLint代码规范检查和unit单元测试等
webpack-simple: 没有代码规范检查和单元测试
browserify: 使用的也比较多
browserify-simple
2.安装、操作步骤//安装vue-cli,配置vue命令环境 cnpm install vue-cli -g vue --version vue list // 初始化项目,生成项目模板 vue init 模板名 项目名 //进入生成的项目目录,安装模块包 cd vue-cli-demo cnpm install //运行 npm run dev //启动测试服务 npm run build //将项目打包输出dist目录,项目上线的话要将dist目录拷贝到服务器上3.文件介绍
. |-- build // 项目构建(webpack)相关代码 | |-- build.js // 生产环境构建代码 | |-- check-version.js // 检查node、npm等版本 | |-- dev-client.js // 热重载相关 | |-- dev-server.js // 构建本地服务器 | |-- utils.js // 构建工具相关 | |-- webpack.base.conf.js // webpack基础配置 | |-- webpack.dev.conf.js // webpack开发环境配置 | |-- webpack.prod.conf.js // webpack生产环境配置 |-- config // 项目开发环境配置 | |-- dev.env.js // 开发环境变量 | |-- index.js // 项目一些配置变量 | |-- prod.env.js // 生产环境变量 | |-- test.env.js // 测试环境变量 |-- src // 源码目录 | |-- components // vue组件 | |-- store // 状态管理 | |-- App.vue // 页面入口vue文件 | |-- main.js // 程序入口文件,加载各种公共组件 |-- static // 静态文件 | |-- data |-- .babelrc // ES6语法编译配置 |-- .editorconfig // 定义代码格式 |-- .gitignore // git上传需要忽略的文件格式 |-- README.md // 项目说明 |-- favicon.ico //网页图标 |-- index.html // 入口页面 |-- package.json // 项目配置信息 .
此列表拷贝自:https://segmentfault.com/a/11...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/89335.html
摘要:提供了两种向组件传递参数的方式。子路由项路径不要使用开头,以开头的嵌套路径会被当作根路径。路由实例的方法这里学习两个路由实例的方法和。实际上,是通过不同的将这些资源加载后打包,然后输出打包后文件。 一、vue-router 1、简介 我们经常使用vue开发单页面应用程序(SPA)。在开发SPA过程中,路由是必不可少的部分,vue的官方推荐是vue-router。单页面应用程序看起来好像...
摘要:当组件给其他人使用时这很有用,因为这些验证要求构成了组件的,确保其他人正确地使用组件。有特性的称为命名。例如,假定我们有一个组件,它的模板为父组件模板渲染结果为 一、注册 // 定义 var MyComponent = Vue.extend({ template: A custom component! }); // 注册 Vue.component(my-component, ...
摘要:各模块各司其职,提高开发效率。使用生成的项目目录里,我们主要关注目录。这个是我们之前提到的单页面组件。这是项目的路由文件,存放项目中所有的路由。这里和我们之前所学没什么不同,不过是涉及了不少的知识。 一、vue模块化开发 所谓的模块化开发是指将不同的部分封装到不同的模块中,不再将所有的组件、路由等写在一个页面中。各模块各司其职,提高开发效率。 使用vue-cli生成的项目目录里,我们主...
摘要:各模块各司其职,提高开发效率。使用生成的项目目录里,我们主要关注目录。这个是我们之前提到的单页面组件。这是项目的路由文件,存放项目中所有的路由。这里和我们之前所学没什么不同,不过是涉及了不少的知识。 一、vue模块化开发 所谓的模块化开发是指将不同的部分封装到不同的模块中,不再将所有的组件、路由等写在一个页面中。各模块各司其职,提高开发效率。 使用vue-cli生成的项目目录里,我们主...
阅读 1701·2021-10-18 13:30
阅读 2557·2021-10-09 10:02
阅读 2928·2021-09-28 09:35
阅读 2066·2019-08-26 13:39
阅读 3498·2019-08-26 13:36
阅读 1930·2019-08-26 11:46
阅读 1080·2019-08-23 14:56
阅读 1664·2019-08-23 10:38