vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )

一、路由的配置

路由  vue-router

1. 什么是路由?

路由相当于一个配置对象

路由:就是我们通过不同的url访问不同的内容,通过angular.js 可以实现多视图的单页,现在流行的单页面开发模式。

2. 路由在web 有两种:

第一种 hash hash值前面带 #

"  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string  #hash "

第二种是 history 对象 这种路由 不带 #

mode:"history",

$router: 路由器对象, 包含一些操作路由的功能函数, 来实现编程式导航(跳转路由)

$route: 当前路由对象, 一些当前路由信息数据的容器, path/meta/query/params

3. 如何实现路由

1. 在模板中使用 <router-link=”/path”> 实现跳转功能,来取代a这个vue自带的组件,to属性来取代 href。

<router-link to="/home">我是主页</router-link> to=“xx” to是要跳转到的路由路径

2. 使用 <router-view> 用于存放你的信息,这个相当于一个容器,里面存放了很多组件,我点谁,就把谁放到对应模板里面.

<router-view></router-view>

Component 挂载单个路由

Components 挂载多个路由

这个path:"/weixin" 对应着要跳转的路由to="/weixin",然后挂载component对应着组件,就实现点击路由出现组件这块页面。

4. 怎么实现 vue 路由  记住 四个字

1. 定

定义组件,点谁谁过来,vue所做项目,由大量组件拼接的

  

2. 配

1.  配置路由,让path和component专业说(映射成功)白话说一一对应

2.  路由配置的值是一个数组

3.  路由也是组件,这个仅仅是配置路由

4.  to="/home"对应id="home"

  

3. 实

1. 路由配置是成功了,人为知道,但vue不一定知道,需要导入到路由配置里去

2. 这个 routes 是vue-router中选项固有的

  

4. 挂

1. 将路由实例挂载到vue实例下

2. router 选项 是用来挂载路由实例

3. router挂载路由实例,把router1挂载到router

  

5. 路由模式的更换:

默认是hash模式,在实例化路由中选项 添加 mode:”history”

6. 路由嵌套:

1. 第一步在你嵌套的组件里面写

在模板中使用 <router-link=”/path”> 实现跳转功能,来取代a这个 vue 自带的组件,to=“xx“。

里面是跳转的模板组件

使用 <router-view> 存放渲染内容

2. 第二步配置路由,把嵌套的路由放在 {} 里面进行配置

Children 是子路由的配置

7. 路由参数

写法:在路由配置中,在对应的组件下

同一个模板参数不同而而内容数据不同,需要获取参数

http://127.0.0.1:8848/weixin/12   在网络地址获取参数 12,是实参

1.  <router-link to="/friends/13">好友</router-link>

2. 在配置路由里面传形参id

3. 在组件中 实例初始化数据请求到后,可输出出来。

作者:晋飞翔
手机号(微信同步):17812718961
希望本篇文章 能给正在学习 前端的朋友 或 以及工作的朋友 带来收获 不喜勿喷 如有建议 多多提议 谢谢!

原文地址:https://www.cnblogs.com/jinfeixiang/p/11617745.html

时间: 2024-10-04 00:04:09

vue学习指南:第十一篇(详细) - Vue的 路由 第一篇 ( router )的相关文章

入木三分学网络第一篇--VRRP协议详解第一篇(转)

因为keepalived使用了VRRP协议,所有有必要熟悉一下. 虚拟路由冗余协议(Virtual Router Redundancy Protocol,简称VRRP)是解决局域网中配置静态网关时,静态网关出现单点失效现象的路由协议. VRRP广泛应用在边缘网络中,它的设计目标是支持特定情况下IP数据流量失败转移不会引起混乱,允许主机使用单路由器(位于一个虚拟路由器组中, 在该组中,只有一台路由器--master路由器工作,转发数据包,其它路由器是backup路由器,不参与转发数据包),以及在实

vue学习指南:第十二篇(详细) - Vue的 路由 第二篇 ( 路由按需加载(懒加载))

各位朋友 因 最近工作繁忙,小编停更了一段时间,快过年了,小编祝愿 大家 事业有成 学业有成 快乐健康 2020开心过好每一天.从今天开始 我会抽时间把 Vue 的知识点补充完整,以及后期会带给大家更完善的知识体系!!! 路由的按需加载(懒加载) 我们都知道 vue的路由是我们必学的,也是不可分离的一部分,我们传统引入路由的方式是这样的, import Home from '@/components/home/Home' 但是在真正项目的开发中,这种现象是杜绝的,是不建议使用这种传统方式引入的.

vue学习指南:第十五篇(详细) - Vuex

Vuex 一.基础 1. Vuex 相当于 vue的数据仓库 2. Vuex 是 vue 的状态管理工具 3. Vuex中的 state 只能通过mutations 改变 4. Vuex很适合做购物车 什么是Vuex? Vuex采用集中式存储所有组件的数据状态,并且中间状态和store(后台数据)是响应的. 什么是响应? 前台的组件数据发生改变了,那后台的store数据都会发生改变,从而导致根这个组件有关联的都会改变,所以很适合做购物车. Vuex有什么好处?及使用场景? 好处:可以做状态管理

vue学习指南:第二篇(详细Vue基础) - Vue的指令

一. Vue 的介绍 1. vue是一个 mvvm 的框架.(面试官经常会问的),angular 是 mvc的框架. 2. vm 是 vum 的实例,这个实例存在计算机内存中,主要干两件大事: 1. 绑定数据 2. dom检测 3. vue 实例 靠 new 关键字实例化 vue 对象,使用 mvvm 模型 1. M modal 数据 2. v view 视图 3. vm 全称viewmodal 就是一个vue实例 4. Vue.js 是封装的一个类,参数是个 options 对象 最常用的属性

vue学习指南:第九篇(详细) - Vue的 Slot-插槽

Slot  v-slot 插槽元素 浏览器在解析时候首先把它当作标签来解析,只有遇到不认识的就不管了,直接跳过,当你发现是组件,在以组件形式解析. 使用插槽的好处? 比如一个网站 分布顶部都是一样的,如果使用组件,要写好几个导航组件.我只写一个导航组件,然后让插值里面东西去覆盖内容 就可以了. * 在页面渲染的时候,slot元素会被替换成组件标签里面的东西.那这个slot就是哈哈哈. * 不仅可以直接写内容,还可以套标签.还可以写其它组件. 1. 编译作用域 在谁的模板下,组件标签中的数据就是谁

三 vue学习三 从读懂一个Vue项目开始

源码地址:     https://github.com/liufeiSAP/vue2-manage 我们的目录结构: 目录/文件 说明 build 这个是我们最终发布的时候会把代码发布在这里,在开发阶段,我们基本不用管. config 配置目录,默认配置没有问题,所以我们也不用管 node_modules 这个目录是存放我们项目开发依赖的一些模块,这里面有很多很多内容,不过高兴的是,我们也不用管 src 我们的开发目录,基本上绝大多数工作都是在这里开展的 static 资源目录,我们可以把一些

vue学习一:新建或打开vue项目

1.前期准备: node.js环境,安装node npm或者cnpm(npm的淘宝镜像,在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org.由于有些npm有些资源被屏蔽或者是国外资源的原因,经常会导致用npm安装依赖包的时候失败,所以需要npm的国内镜像---cnpm) vue-cli 脚手架构建工具,构建项目(在命令行中运行命令 cnpm install -g vue-cli) 2.用vue-cli构建项目

CCNA学习指南 第十一章 下载

本章主要介绍以太网交换机的基本工作原理以及运行于交换机之上的生成树协议(spanningtree protocol).在基本交换原理的基础上又介绍了虚拟局域网(VLAN)的原理和VLAN间通信的实现方法.

疯狂Java学习笔记(52)-----------Annotation(注释)第一篇

从JDK1.5开始,Java中增加了对元数据(MetaData)的支持,也就是Annotation(注释),这种Annotation与Java程序中的单行注释和文本注释是有一定区别,也有一定联系的.其实,我们现在说的Annotation是代码里的特殊标记,这些标记可以在编译,类加载,运行时被读取,并执行相应的处理.通过Annotation,程序开发人员可以在不改变原来逻辑的情况下,在源文件嵌入一些补充的信息.代码分析工具,开发工具和部署工具可通过这些补充信息进行验正或者部署. Annotatio