在初始化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. 用户 'NT Service\MSSQLServerOLAPService' 登录失败

    初学SSAS,部署微软官方示例项目AdventureWorksDW2012Multidimensional时出现错误:用户 'NT Service\MSSQLServerOLAPService' 登录 ...

  2. 继承&封装

    扩展一个已有的类,并且继承该类的属性和行为这种方式成为继承. 实例 public class Polygon { public int sides; public double area; publi ...

  3. oracle AWR详解

    原文地址:https://blog.csdn.net/elvis_lfc/article/details/52326148 啥是AWR? =============================== ...

  4. css常用代码大全以及css兼容(转载)

    css常见的快捷开发代码汇总(长期更新),包括CSS3代码,有一些css效果很顽固,经常会一时找不出解决方案,网络上也有很多的工具和高手提供了具体的浏览器兼容代码,这个页面我今后会经常整理,希望能够帮 ...

  5. IOS - xib(Interface Builder,view) - can't change view size(view不能改变大小问题)

    很多时候,我们自定义tableview.collectionview的cell,也有时候我们要自定义窗口xib,但创建xib后,其height.width不可修改. 这时问题就来了,怎么才能使我们的自 ...

  6. nyoj256-C小加之级数求和

    C小加 之 级数求和 时间限制:3000 ms  |  内存限制:65535 KB 难度:2 描述 最近,C小加 又遇到难题了,正寻求你的帮助. 已知:Sn= 1+1/2+1/3+-+1/n. 显然对 ...

  7. nlogn求逆序对&&陌上花开

    前置: nlogn逆序对: 前一个小时我还真的不会这个Orz 这里运用归并排序的思想. 对于一个序列,我们把它先分开,再合并成一个有序序列. 引自https://blog.csdn.net/qq_30 ...

  8. javax.servlet.http.HttpServletRequest; 不存在

    右击项目 找到 最后一项 属性设置 选择 Server Runtime 选择导入你的 tomcat jar 包

  9. 03.IO读写-2.用with open进行文件读写

    读写文件是最常见的IO操作.Python内置了读写文件的函数,用法和C是兼容的. 读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘, ...

  10. BA--空调静压箱的作用

    空调静压箱的主要作用有两个,一个是降低噪音:一个是提高送风距离.工作原理如下:空调出风从空调风机里面出来的时候,具有很大的风速,同时由于空调风机自身的结构原因,空调的出风并不均衡,空气在风管中相互摩擦 ...