在初始化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. 关于如何成为高级java程序员

    今日,对如何进一步提升java.成为一个高级的程序员有了兴趣,在网上看到一篇回答,感觉不错,记下来 总结了以下六点:一.JAVA基础 要想成为高级Java程序员,Java是一定要学习的.要成为高级程序 ...

  2. day06-08初识面向对象

    一.面向过程 VS 面向对象 面向过程的程序设计的核心是过程(流水线式思维),过程即解决问题的步骤,面向过程的设计就好比精心设计好一条流水线,考虑周全什么时候处理什么东西.优点是:极大的降低了写程序的 ...

  3. css 里面怎么改链接颜色

    a.color1:link{color: #FFFFFF ; text-decoration:none;} /*常规时候的样式*/a.color1:visited{color: #FFFFFF; te ...

  4. Vue学习之路第十七篇:全局过滤器的使用

    1.过滤器 ①:Vue.js 允许你自定义过滤器,可被用于一些常见的文本格式化.过滤器可以用在两个地方:插值表达式和 v-bind 表达式 (后者从 2.1.0+ 开始支持).过滤器应该被添加在 Ja ...

  5. iview datepicker 选择的时间少一天

    使用iview的datepicker时间选择器发现获取的value值是比实际要少一天,严格来说应该是时间格式不一样,datepicker获取的时间是UTC时间格式,也就是:yyyy-MM-ddTHH: ...

  6. docker安装tensorflow环境遇到的问题与解决方案

    docker安装 Tensorflow遇到问题i/o timeout. docker: Error response from daemon: Get https://gcr.io/v1/_ping: ...

  7. 【AIM Tech Round 5 (rated, Div. 1 + Div. 2) B】Unnatural Conditions

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 让a+b的和为100000000...0这样的形式就好了 这样s(a+b)=1<=m就肯定成立了(m>=1) 然后至于s ...

  8. MarkdownPad 2 安装使用之二三事

    本系列文章由 @yhl_leo 出品,转载请注明出处. 文章链接: http://blog.csdn.net/yhl_leo/article/details/50685187 官网:http://ma ...

  9. 关于excel导出

    转载自:https://blog.csdn.net/ljj_9/article/details/50395688 //一个excel表格: HSSFWorkbook wb = new HSSFWork ...

  10. 【转】一分钟读懂互联网广告竞价策略GFP+GSP+VCG

    参考这篇文章: http://ju.outofmemory.cn/entry/116780 一分钟读懂互联网广告竞价策略GFP+GSP+VCG 两个广告位,三家广告主竞价,广告平台究竟应该制定广告竞价 ...