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 添加进来,我们需要做的是,将 ...
随机推荐
- Android 消息队列机制
在非UI线程使用Handler进行线程通信时,一般都需要进行3个步骤: 创建Looper Looper.prepar() 创建Handler 启动消息循环Looper.loop() 通过这3步,基本就 ...
- 【原创】IBM Websphere 报错:JSPG0120E: 为 pageEncoding 属性和匹配 URI 模式的配置元素指定不同的值是非法的。
websphere中间件,在打开一个jsp页面时报: IBM Websphere 报错:JSPG0120E: 为 pageEncoding 属性和匹配 URI 模式的配置元素指定不同的值是非法的. . ...
- .apply .call方法的区别及使用 .apply第二个参数为数组,.call第二个参数为参数列表, 相同点:第一个参数都为Function函数内部的this对象.
Function.apply(obj,args)方法能接收两个参数 obj:这个对象将代替Function类里this对象 args:这个是数组,它将作为参数传给Function(args--> ...
- 序列模型(3)---LSTM(长短时记忆)
摘自https://www.cnblogs.com/pinard/p/6519110.html 一.RNN回顾 略去上面三层,即o,L,y,则RNN的模型可以简化成如下图的形式: 二.LSTM模型结构 ...
- Python笔记21-------浅复制和深复制、赋值
上面图表示浅复制和深复制,针对顶层对象来说,赋值为引用,浅复制和深复制都是复制一个新的对象. 针对子对象来说,浅复制为引用.深复制就是复制两个一样的. 1.赋值 A= [ 1,2,3, [ 'a',' ...
- 51nod1072 - 威佐夫游戏【威佐夫博弈】
有2堆石子.A B两个人轮流拿,A先拿.每次可以从一堆中取任意个或从2堆中取相同数量的石子,但不可不取.拿到最后1颗石子的人获胜.假设A B都非常聪明,拿石子的过程中不会出现失误.给出2堆石子的数量, ...
- JAVA基础知识复习小结
集合 Set集合 Set集合的基本特征是元素不允许重复.HashSet不保存元素顺序,LinkedHashSet用链表保持元素的插入顺序,TreeSet可定制排序规则. HashSet的底层是用Has ...
- idea进入列选择模式
shift + alt + insert 快捷键进入或退出列选择模式 进入列选择模式可以以列坐标选择一列或者多列
- 学习redis遇到的问题
1. pipeline为什么批量执行速度会变快? 答:是因为在tcp连接中减少了交互往返的时间,因为每次执行还要返回响应值,并且是一条执行完成之后才会执行下一条,但是批量执行只需要一次往返,所以节省了 ...
- 【hihocoder 1317】搜索四·跳舞链
[题目链接]:http://hihocoder.com/problemset/problem/1317 [题意] [题解] dfs就能过吧. 在选取的时候; 把选取的这一行,占据的列,列的权值+1; ...