什么是路由?

路由可看做是一个键值对,K-V。

K => path()路径地址

V=> 处理请求的回调函数

前台路由

K => path()路径地址

V=> 路由组件

编写使用路由的步骤

1.创建编写路由组件

2.注册配置路由

routes: [
{ // 一般路由
path: '/about',
component: About
},
{ // 自动跳转路由
path: '/',
redirect: '/about'
}
]

3.注册配置路由器

在main.js里面配置路由器

4.使用路由

 <router-link to="/xxx">Go to XXX</router-link> 生成路由连接
<router-view></router-view>  用来显示当前路由组件界面

<keep-alive><\keep-alive>路由状态保持,使用返回之前的路由会记录之前路由的状态

 

Vue.js----router(路由)的更多相关文章

  1. vue.js之路由

    Vue.js本身只提供数据与视图绑定及组件化等功能,如果想用它来开发一个完整的SPA(单页面应用),我们就还需要使用一些Vue.js的插件.今天我学习一种叫做Vue-router的插件,用来提供路由管 ...

  2. Vue.js之路由系统

    Vue.js生态之vue-router vue-router是什么? vue-router是Vue的路由系统,定位资源的,我们可以不进行整页刷新去切换页面内容. vue-router的安装与基本配置 ...

  3. Vue.js:路由

    ylbtech-Vue.js:路由 1.返回顶部 1. Vue.js 路由 本章节我们将为大家介绍 Vue.js 路由. Vue.js 路由允许我们通过不同的 URL 访问不同的内容. 通过 Vue. ...

  4. vue.js嵌套路由-------由浅入深

    嵌套路由就是路由里面嵌套他的子路由 子路由关键属性children 每一个子路由里面可以嵌套多个组件 子组件又有路由导航和路由容器 <router-link to="/父路由的地址名字 ...

  5. Vue.js的路由之——vue-router快速入门

    直接先上效果图 这个单页面应用有两个路径:/home和/about,与这两个路径对应的是两个组件Home和About. 整个实现过程 JavaScript 创建组件:创建单页面应用需要渲染的组件 创建 ...

  6. Vue的Router路由传参

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

  7. Vue中router路由的使用、router-link的使用(在项目中的实际运用方式)

    文章目录 1.先看router中的index.js文件 2.router-link的使用 3.实现的效果 前提:router已经安装 1.先看router中的index.js文件 import Vue ...

  8. Vue.js搭建路由报错 router.map is not a function,Cannot read property ‘component’ of undefined

    错误: 解决办法: 2.0已经没有map了,使用npm install vue-router@0.7.13 命令兼容1.0版本vue 但是安装完之后会出现一个错误: Cannot read prope ...

  9. vue.js 二 路由懒加载

    当项目小的时候,我没考虑要去找这个得解决方案,也幸好现在几乎能迁移的项目都整合在了一个vue的项目里面 才发现编译后的vendor.js变得异常的大,而且几乎在项目每一个页面都需要加载这一个js,项目 ...

  10. vue.js中路由传递参数

    知识点:vue路由传递参数,第二个页面(A.B页面)拿到参数,使用参数 方法一:使用 <router-link :to="{name:'edithospital',params:{hi ...

随机推荐

  1. 170820-关于JSP页面的知识点

    1.JSP [1] 简介 > HTML - HTML擅长显示一个静态的网页,但是不能调用Java程序. > Servlet - Servlet擅长调用Java程序和后台进行交互,但是它不擅 ...

  2. [CSP-S模拟测试]:Rectangle(模拟+树状数组)

    题目描述 平面上有$n$个点,第$i$个点的坐标为$X_i,Y_i$.对于其中的一个非空点集$S$,定义$f(S)$为一个最小矩形,满足:$\bullet$覆盖$S$中所有的点(在边界上也算覆盖):$ ...

  3. Why is HttpContext.Current null during the Session_End event?

    Why is HttpContext.Current null during the Session_End event? On Session_End there is no communicati ...

  4. 架构-SOA:SOA(面向服务的架构)

    ylbtech-架构-SOA:SOA(面向服务的架构) 面向服务的架构(SOA)是一个组件模型,它将应用程序的不同功能单元(称为服务)进行拆分,并通过这些服务之间定义良好的接口和契约联系起来.接口是采 ...

  5. MySQL-创建测试数据

    简单的方法(每次增加一倍): insert into tb_user(f_id, f_username) select rand(), f_username from tb_user

  6. 140、spring webflux 高并发的spring组件

    最近公司可谓是风云变幻,年前说要拆开卖,后来说要整体卖,表示像我这种渣渣,始终逃脱不掉被卖的命运 下面进入正题 spring webflux 是spring 支持的高并发web框架,将每个http请求 ...

  7. 002-序列化装换JSON&XML概述

    一.概述 https://github.com/bjlhx15/java-serializer java-serializer 序列化项目 serialize-json-lib:json-lib框架 ...

  8. oracle blob 反序列化错误

    代码的目的是先将一个配置类JobConfig序列化存进Oracle中的Blob中,然后查的时候反序列化出来. 先看一下控制台报错 ### Cause: com.audaque.lib.core.exc ...

  9. FTP 服务器搭建(基于 CentOS 7)

    参考资料: 檔案伺服器之三: FTP 伺服器 用 vsftpd 配置FTP服务器 vsftpd 的所有选项 注意,如果要所有人同时编辑 FTP 上的所有文件,可以将 vsftpd.conf 配置文件中 ...

  10. 爬虫(六)——存储库(一)MongoDB存储库

    目录 存储库--MongoDB 一.安装MongoDB 4.0 1.安装 2.修改数据库文件和日志保存位置设置(可不改) 3.账户管理.远程服务 三.MongoDB数据库操作 1.对库操作 2.对集合 ...