vue入门--简单路由配置
在初始化vue init webpack <工程名>时,有一步是询问是否安装vue-router,选择yes,如果没有安装的话,后面需要自己安装。然后在目录中可以看到有个文件夹叫router:

首先在components里有多个VUE页面,这里假设有两个:HelloWorld和firstcom。我们刚开始进去的时候显示HelloWorld界面:

点击其中的firstcom按钮,即跳转到下一个界面:

这里使用初始化的APP作为主页面:

其中的<router-link to="你想跳转的组件名称">标签将按钮默认渲染成一个a标签模式,点击就会跳转页面,但不是全部页面都会变,跳转后的内容只是被渲染在<router-view/>这里。所以看上面两个页面中,VUE的logo同时存在。
JS的配置: 打开router目录下的index.js文件,将firstcom组件用import导入,再在routes中注册(还是声明?刚开始学,还分不清楚)组件:

这样一个超简单的路由跳转就出来了!Router中的mode:history表示加载的方式,如果加上这句话,那么路由跳转后的链接中没有“#”号,便于浏览器搜索,也比较好看!path:'/'表示路由默认的组件,每次进去都会默认进入到这儿。
特别注意:path与name的顺序不能反!!!就是path必须放在最前面,否则就是空白一片!
vue入门--简单路由配置的更多相关文章
- django 简单路由配置
Django==2.0.1 版本路由配置: 1.在manage.py同级目录下新建一个应用app1 在app1下新建urls.py文件,定义一个app1的空白路由: from django.urls ...
- vue入门--简单嵌套路由的一个路径小问题
假设现在有一个项目,刚进去要显示main页面下的contorl页面,那么路由里面的初级路由应该是{main和err},这两个是同一级,然后{control和set}是main下的子路由,foot是这两 ...
- vue项目的路由配置
方案一.在生成项目的时候就选择安装路由; 这个地方选择y即可; 生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着 ...
- vue入门----------scss的配置使用
1.安装相应的依赖 cnpm install sass-loader --save-dev cnpm install node-sass --save-dev 2.在build文件下的webpack. ...
- vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)
简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...
- vue入门----------路由配置
在使用脚手架搭建好项目后要配置路由 1.首先要安装vue-router,你可以在项目的package.json文件中的dependencies项目中添加"vue-route": & ...
- Vue router简单配置入门案例
{ 注意驼峰命名法,不然会报错 } 1.在Views文件夹下创建Vue路由文件,例如: <template> </template> <script> </ ...
- Vue的简单入门
Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...
- vue 开发系列(七) 路由配置
概要 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将 ...
随机推荐
- 位姿检索PoseRecognition:LSH算法.p稳定哈希
位姿检索使用了LSH方法,而不使用PNP方法,是有一定的来由的.主要的工作会转移到特征提取和检索的算法上面来,有得必有失.因此,放弃了解析的方法之后,又放弃了优化的方法,最后陷入了检索的汪洋大海. 0 ...
- 解决strip: Unable to recognise the format of the input file问题
前言 在编译xilinx的uboot的时候出现了一个问题,始终报错:“strip: Unable to recognise the format of the input file `gen_et ...
- Smallest Common Multiple FreeCodeCamp
题目:找出能被两个给定参数和它们之间的连续数字整除的最小公倍数. 范围是两个数字构成的数组,两个数字不一定按数字顺序排序. 分析:首先题目的意思求一个连续数列的所有数字的最小公倍数,这连续的数字序列 ...
- 【leecode】小练习(简单8题)
def twoSum(nums, target): """ 给定 nums = [2, 7, 11, 15], target = 9 因为 nums[0] + nums[ ...
- HMM隐马尔可夫模型(词语粘合)
HMM用于自然语言处理(NLP)中文分词,是用来描述一个含有隐含未知参数的马尔可夫过程,其目的是希望通过求解这些隐含的参数来进行实体识别,说简单些也就是起到词语粘合的作用. HMM隐马尔可夫模型包括: ...
- java 文件夹不存在的解决方案
使用new File(path).mkdirs()创建所需路径,几十有多层不存在的路径也可以直接创建,切记方法名以s结尾,不带s的智能创建一层不存在的目录,不能自动创建多层目录结构.
- Codeforces Round #468 (Div. 2, based on Technocup 2018 Final Round)D. Peculiar apple-tree
In Arcady's garden there grows a peculiar apple-tree that fruits one time per year. Its peculiarity ...
- yii2-dingtalk 钉钉群机器人
说明 群机器人是钉钉群的高级扩展功能.群机器人可以将第三方服务的信息聚合到群聊中,实现自动化的信息同步.目前,大部分机器人在添加后,还需要进行Webhook配置,才可正常使用(配置说明详见操作流程中的 ...
- rtsp://admin:12345@192.168.1.198/mpeg4/main/ch01/av_stream
rtsp://admin:12345@192.168.1.198/mpeg4/main/ch01/av_stream
- Python全双工聊天
全双工聊天 全双工聊天:服务端和客户端都可以发送并接收信息. 使用select模块中的select方法 select(rlist, wlist, xlist[, timeout]) -> (rl ...