在初始化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. Verilog之$sreadmemb

    1 Memories  Memories file format is shown below, the address is specified as @ <address> in he ...

  2. python版本及ML库

    一:关于Python版本的选择问题 关于Python的选择问题:要看学术界能不能把科学库迁移到Python3. 1:多个版本共用: 最近发现SciPy的最高版本是3.2,只能是退而求其次,不使用最新版 ...

  3. C51端口结构和工作原理(转)

    一.P0端口的结构及工作原理 P0端口8位中的一位结构图见下图:   由上图可见,P0端口由锁存器.输入缓冲器.切换开关.一个与非门.一个与门及场效应管驱动电路构成.再看图的右边,标号为P0.X引脚的 ...

  4. github下载报错:Permission denied (publickey). fatal: Could not read from remote repository.

    Permission denied (publickey). fatal: Could not read from remote repository. 博主在github上下载tiny face的的 ...

  5. 铁大FaceBook的使用体验

    铁大FaceBook是一个类似QQ和微信等聊天程序的缩小版网站,并且其针对领域较为狭窄:即只针对校园的学生和导员等人员.但其有值得推广的潜力性和可能性. 对于使用它的体验:第一点我感觉这个网站的界面很 ...

  6. 【Tool】Mac环境维护

    1. 安装编译opencv https://blog.csdn.net/lijiang1991/article/details/50756065 /Users/yuhua.cheng/Opt/open ...

  7. 使用shell脚本定时执行备份mysql数据库

    使用shell脚本定时执行备份mysql数据库 #!/bin/bash ############### common file ################ #本机备份文件存放目录 MYSQLBA ...

  8. Hibernate Session操作

    1.增加 @Test public void add(){ Configuration cfg=new Configuration().configure(); SessionFactory fact ...

  9. ROPI下载安装

    ROPI下载安装 官方地址 参考文献 安装过程 wget http://num.math.uni-goettingen.de/~m.goerigk/ropi/0.1.0/ropi-0.1.0.tar. ...

  10. Python爬虫基础--爬取车模照片

    import urllib from urllib import request, parse from lxml import etree class CarModel: def __init__( ...