main.js:

1、先在项目安装路由模块:npm install vue-router --save-dev
2、使用路由:main.js首先要引用vue模块:

import Vue from 'vue'

3、再引用路由模块:

import VueRouter from ‘vue-router’

4、使用VueRouter:

Vue.use(VueRouter)

5、配置路由:

import Home from './components/home' /父级组件
import HelloWorld from './components/HelloWorld' /子组件 const router = new VueRouter({
routes:[
{path:‘/’,component:Home}//主页地址
{path:‘/helloworld’,component:HelloWorld}//地址
],
     mode:‘history’  //添加这个属性后页面地址就不存在#/的问题
})

6、引用配置好的路由router:

new Vue({
router,
  el:'#app'
components: { App },//这是根组件
  templater:'<App/>'
})

根目录:这里是App.vue

7、找到路径后,在根组件展示:

<router-view></router-view>

此时刷新界面页面地址变成http://localhost:8080/#/,

当在地址输入http://localhost:8080/#/helloworld,就会跳转到helloworld这个界面

7、写到这里就可以使用a标签跳转了

但是会刷新界面

根目录:App.vue

<templater>
<div id='app'>
<router-view></router-view>
<ul>
      <li><a href='/'>home</a></li>  //href的地址必须是配置路由的地址
<li><a href='/helloworld'>hello</a></li>  //href的地址必须是配置路由的地址
     </ul>  
</div>
</templater>

8、路由跳转:

不会刷新界面,高效率!

<templater>
<div id='app'>
<router-view></router-view>
<ul>
      <li><router-link to='/'>home</router-link></li>  //href的地址必须是配置路由的地址
<li><router-link to='/helloworld'>hello</router-link></li>  //href的地址必须是配置路由的地址
     </ul>  
</div>
</templater>

Vue--路由的更多相关文章

  1. Vue路由vue-router

    前面的话 在Web开发中,路由是指根据URL分配到对应的处理程序.对于大多数单页面应用,都推荐使用官方支持的vue-router.Vue-router通过管理URL,实现URL和组件的对应,以及通过U ...

  2. 攻克vue路由

    先下手 路由是个好功能,但是每次都感觉没法开始下手,愣愣的看半天官方文档,所以做个快速开始教程. 首先先搭好HTML文件结构: <!--link和view在一个父元素下--> <di ...

  3. Vue路由学习心得

    GoodBoy and GoodGirl~进来了就看完点个赞再离开,写了这么多也不容易的~ 一.介绍  1.概念:路由其实就是指向的意思,当我们点击home按钮时,页面中就要显示home的内容,点击l ...

  4. VUE路由新页面打开的方法总结

    平常做单页面的场景比较多,所以大部分的业务是在同一个页面进行跳转.要通过VUE路由使用新页面打开且传递参数,可以采用以下两个方法: 1.router-link的target <router-li ...

  5. vue路由参数变化刷新数据

    当路由到某个组件时,由于组件会复用,所以生命周期函数不会再次执行, 如果这个组件是模板组件,靠传入不同数据来显示的.那么,可能会发生参数变化了但页面数据却不变化. 问题 假如有个组件 info.vue ...

  6. 10.3 Vue 路由系统

     Vue 路由系统  简单示例 main.js  import Vue from 'vue' import App from './App.vue' //https://router.vuejs.or ...

  7. vue路由原理剖析

    单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面, 实现这一点主要是两种方式: 1.Hash: 通过改变hash值 2.History: 利用history对象新特性(详情可出门左拐见:  ...

  8. 3种vue路由传参的基本模式

    路由是连接各个页面的桥梁,而参数在其中扮演者异常重要的角色,在一定意义上,决定着两座桥梁是否能够连接成功. 在vue路由中,支持3中传参方式. 场景,点击父组件的li元素跳转到子组件中,并携带参数,便 ...

  9. 14.vue路由&脚手架

    一.vue路由:https://router.vuejs.org/zh/ 1.定义 let router = new VueRouter({ mode:"history/hash" ...

  10. react router @4 和 vue路由 详解(八)vue路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 13.vue路由守卫 a.beforeEach 全局守卫 (每个路由调用前都会触发,根据 ...

随机推荐

  1. [转帖]Vim 编辑器底端 [noeol], [dos] 的含义

    Vim 编辑器底端 [noeol], [dos] 的含义 2012年11月28日 23:13:04 strongwangjiawei 阅读数:15484 https://blog.csdn.net/s ...

  2. picker-view 组件 的value失效问题

    首先检查是不是漏了绑定关系 组件内 组件引用 如过还不行就用下面的方法,顺序问题 在给暂时列表赋值之后再对value赋值

  3. .Net在操作mysql查询的时候出现“: Unknown column 'UserName' in 'where clause'”错误

    今天使用.Net操作mysql查询的时候,如果加上条件查询的时候就会出现 Unknown column 'UserName' in 'where clause'这个错,不加条件直接select * f ...

  4. java类型的小知识List 等

    List 复制之 浅拷贝与深拷贝 详细连接https://blog.csdn.net/never_tears/article/details/79067245 java中判断字符串是否为数字的方法的几 ...

  5. java.lang.Comparable 接口 详解

    参考https://blog.csdn.net/itm_hadf/article/details/7432782 http://www.blogjava.net/jjshcc/archive/2011 ...

  6. python学习笔记(5)-time库的使用

    import time 一.时间获取函数 time(), ctime(),gmtime() >>> import time >>> time.time() 1524 ...

  7. Jmeter安装与使用(压测)

    一.介绍 Apache JMeter是100%纯JAVA桌面应用程序,被设计为用于测试客户端/服务端结构的软件(例如web应用程序).它可以用来测试静态和动态资源的性能,例如:静态文件,Java Se ...

  8. Windows Server2008、IIS7启用CA认证及证书制作完整过程

    1         添加活动目录证书服务 1.1          打开服务器管理器,右键点击角色,选择“添加角色”,在“添加角色向导”窗口左侧面板选择“服务器角色”,然后勾选“Active Dire ...

  9. linux 安装Brew

    点击查看原文 Linuxbrew:Linux下的Homebrew amendgit 关注 2017.02.16 17:20* 字数 455 阅读 4745评论 0喜欢 2 前不久还在跟同事抱怨ubun ...

  10. Python操作Memcached

    Memcached 是一个高性能的分布式内存对象缓存系统,用于动态Web应用以减轻数据库负载.它通过在内存中缓存数据和对象来减少读取数据库的次数,从而提高动态.数据库驱动网站的速度.Memcached ...