在初始化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入门--简单路由配置的更多相关文章

  1. django 简单路由配置

    Django==2.0.1 版本路由配置: 1.在manage.py同级目录下新建一个应用app1 在app1下新建urls.py文件,定义一个app1的空白路由: from django.urls ...

  2. vue入门--简单嵌套路由的一个路径小问题

    假设现在有一个项目,刚进去要显示main页面下的contorl页面,那么路由里面的初级路由应该是{main和err},这两个是同一级,然后{control和set}是main下的子路由,foot是这两 ...

  3. vue项目的路由配置

    方案一.在生成项目的时候就选择安装路由; 这个地方选择y即可; 生成项目之后在src目录下会有router文件夹,里面有index.js,并且里面已经存在一个helloWorld页面了,可以直接模仿着 ...

  4. vue入门----------scss的配置使用

    1.安装相应的依赖 cnpm install sass-loader --save-dev cnpm install node-sass --save-dev 2.在build文件下的webpack. ...

  5. vue 入门 ------简单购物车功能实现(全选,数量加减,价格加减)

    简易购物车功能(无任何布局 主要是功能) 数量的加减 商品的总价钱 全选与全不选 删除(全选.价格 受影响) <script src="https://cdn.jsdelivr.net ...

  6. vue入门----------路由配置

    在使用脚手架搭建好项目后要配置路由 1.首先要安装vue-router,你可以在项目的package.json文件中的dependencies项目中添加"vue-route": & ...

  7. Vue router简单配置入门案例

    { 注意驼峰命名法,不然会报错 } 1.在Views文件夹下创建Vue路由文件,例如: <template> </template>  <script> </ ...

  8. Vue的简单入门

    Vue的简单入门 一.什么是Vue? vue.js也一个渐进式JavaScript框架,可以独立完成前后端分离式web项目 渐进式:vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面, ...

  9. vue 开发系列(七) 路由配置

    概要 用 Vue.js + vue-router 创建单页应用,是非常简单的.使用 Vue.js ,我们已经可以通过组合组件来组成应用程序,当你要把 vue-router 添加进来,我们需要做的是,将 ...

随机推荐

  1. RabbitMQ学习之spring-amqp的重要类的认识

    对于大多数应用来说都做了与spring整合,对于rabbitmq来说.也有与spring的整合.可能通过spring的官网找到spring-amqp项目下载.spring-amqp项目包括三个子项目: ...

  2. JS 九九运算表

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. Linux下挂载分区 (本人实例)

    设置分区开机自动挂载 要在/etc/fstab里设置一行 把上面空格去掉就行了

  4. ubuntu16.04下安装配置nodejs及npm

    官网下载ubuntu对应的二进制文件(Linux Binaries (x64)这一行) https://nodejs.org/en/download/ 解压并安装 ``` $tar zxvf node ...

  5. Win 10安装mysql以及常见问题总结

    一.mysql免安装版本配置1.从官网下载安装包,解压后,在电脑属性环境变量的path中配置bin的路径 2.配置my.ini [mysql] # 设置mysql客户端默认字符集 default-ch ...

  6. POJ 2395 Out of Hay( 最小生成树 )

    链接:传送门 题意:求最小生成树中的权值最大边 /************************************************************************* & ...

  7. nyoj312-20岁生日

    20岁生日 时间限制:1000 ms  |  内存限制:65535 KB 难度:1 描述 路过这的20岁生日就要到了,他当然很开心,可是他突然想到一个问题,是不是每个人从出生开始,到达20岁生日时所经 ...

  8. docker数据卷的使用 -v --volumes--from

    总结一下docker数据管理的三种方法: 1.普通的挂在数据: -v docker run  -v /father/path:/child/path-v 参数会把当前系统的文件目录/father/pa ...

  9. indy10中idtcpclient的使用问题[和大华电子称数据交换]

    在实际事务应用中,多次打开server进行大写.其中遇到一些问题,由于时间关系,没有好好整理,虽然问题解决了, 但原因和其他方法没有去进一步测试. 1.每个单元用本地TidTCPClient变量连接s ...

  10. 【hdu 6444】Neko's loop

    [链接] 我是链接,点我呀:) [题意] 给你一个序列. 你可以选择起点i. 然后每次往右跳k次. 得到下一个值a[i+k];. 问你跳m次能得到的最大值ma是多少. 如果>=s输出0 否则输出 ...