vue-router:vue官方路由管理器。

功能:
嵌套的路由/视图表
模块化的、基于组件的路由配置
路由参数、查询、通配符
基于 Vue.js 过渡系统的视图过渡效果
细粒度的导航控制
带有自动激活的 CSS class 的链接
HTML5 历史模式或 hash 模式,在 IE9 中自动降级
自定义的滚动条行为

安装及创建router对象

安装 npm i vue-router

1.创建单条路由


let index = {path:/index,name:'index',component:映射index的组件}

2.将多条路由合并为一组


let routes = [
index,
页面2,
页面3
]

3创建路由对象


const router = new VueRouter({routes})

4在根实例上引用


new Vue({
router
}).$mount(root)

使用router及传参


1、以params作为参数传递
创建路由

const pageA = {

path:'/pageA/:id', //id是动态传递的参数

name:'contentA', //与router-link中to属性的name对应

component:pageA //pageA的组件

}


跳转路由的链接

<router-link :to="{name:'contentA',params:{id:1,name:'pageA'}}">

Go to PageA

</router-link>


或者传path属性

<router-link :to="{path:/learnRouter/contentA/${id}}">

Go to PageA

</router-link>


页面跳转成功后浏览器url为显示为 /pageA/id
this.$route.params.id来获取


2.以query作为参数传递

const pageA = {
path:'/pageA, //以query作为参数传不需要在path后面加动态属性
name:'contentA', //与router-link中to属性的name对应
component:pageA //pageA的组件
}

跳转路由的组件

<router-link :to="{name:'contentB',query:{id:2}}">

Go to PageA

</router-link>

浏览器url上显示为/pageA?id=1
this.$route.query.id获取

在任何组件中都可以通过this.$router 获得路由对象,this.$route访问的当前路由


导航守卫

全局导航守卫,页面每一次跳转都可以监听,也可以放到组件中单独使用


router.beforeRouteUpdate (to, from, next) {
// to 来自哪里
// from 前往哪里
//next() 来resolve这个钩子的方法,如果不调用就不会完成跳转
//next('/other') 跳到另外一个页面
//next(false) 终止跳转
}

视图
router-link跳转的组件需要加上视图router-view才能显示,
当一个页面有多个视图时用name来区分

视图命名,路由里的component里的name为键名对应router-view name=a


&lt;router-view name="a"&gt;&lt;/router-view&gt;
//路由
const pageA = {
path:'/pageA',
components:{
a:pageA.vue
}
//这条路由的意思是跳转到/pageA时显示name为a的视图,name=a的视图对应的组件也就是pageA.vue

嵌套路由
例如需要一个tab导航栏,单击菜单时切换组件,但是导航菜单不变。


const route = [
{
path:'/index',
name:'index',
//这里定义子路由
children:[
{
path:'/index/pageA',
name:'pageA',
component:pageA
},
{
path:'/index/pageB',
name:'pageB',
component:pageB
}
]
}]

&lt;router-link path="/pageA"&gt;goto pageA &lt;/router-link&gt;
&lt;router-link path="/pageB"&gt;goto pageB &lt;/router-link&gt;
&lt;router-view&gt;&lt;/router-view&gt;

原文地址:https://segmentfault.com/a/1190000016784786

学习路由器vue-router的更多相关文章

  1. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  2. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  3. Vue学习笔记-Vue.js-2.X 学习(七)===>脚手架Vue-CLI(路由Router)

    脚手架Vue-CLI(路由Router) 一 按装(通过新创建脚手架按装),如果在原来的脚手架上按装直接进图型化界面vue ui的插件按装. 二 使用(上面按装下面步骤自动会生成) 第一步:导入路由对 ...

  4. Vue Router详细教程

    1.什么是路由 1.1路由简介 说起路由你想起了什么?路由是一个网络工程里面的术语. 路由(routing)就是通过互联的网络把信息从源地址传输到目的地址的活动. --- 维基百科 额,啥玩意? 没听 ...

  5. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  6. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

  7. Vue Router的入门以及简单使用

    Vue Router 是Vue官方的路由管理器,是Vue用来实现SPA的插件.它和 Vue.js 的核心深度集成,让构建单页面应用(SPA)变得易如反掌. 基本概念: 路由:是一种映射关系,是 “pa ...

  8. [Vue 牛刀小试]:第十二章 - 使用 Vue Router 实现 Vue 中的前端路由控制

    一.前言 前端路由是什么?如果你之前从事的是后端的工作,或者虽然有接触前端,但是并没有使用到单页面应用的话,这个概念对你来说还是会很陌生的.那么,为什么会在单页面应用中存在这么一个概念,以及,前端路由 ...

  9. [Vue 牛刀小试]:第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    一.前言 在上一章的学习中,通过举例说明,我们了解了 Vue Router 中命名路由.命名视图的使用方法,以及如何通过 query 查询参数传参,或者是采用 param 传参的方式实现路由间的参数传 ...

  10. Vue躬行记(8)——Vue Router

    虽然Vue.js未提供路由功能,但是官方推出了Vue Router(即vue-router库),以插件的形式支持.它与Vue.js深度集成,可快速的创建单页应用(Single Page Applica ...

随机推荐

  1. JSPs only permit GET POST or HEAD的解决方案(REST风格)

    问题:原文链接 https://blog.csdn.net/tiberroot/article/details/76615727 看到很多人解决办法使用 @ResponseBody注解 这个意思是按照 ...

  2. Codeforces Round #563 (Div. 2) B. Ehab Is an Odd Person

    链接:https://codeforces.com/contest/1174/problem/B 题意: You're given an array aa of length nn. You can ...

  3. net core WebApi 使用Swagger

    Asp.net core WebApi 使用Swagger生成帮助页 最近我们团队一直进行.net core的转型,web开发向着前后端分离的技术架构演进,我们后台主要是采用了asp.net core ...

  4. Jenkins+Gitlab+Ansible自动化部署(一)

    首先准备实验环境 虚拟机 主机名 IP地址 服务 系统版本 内核版本 Vmware Workstation 14 gitlab.example.com 192.168.244.130 gitlab  ...

  5. idea报错:Error running $classname: Command line is too long. Shorten command line for $classname.

    Command line is too long 打印的变量太长了,超过了限制,这都会报错...我只想知道idea基于什么原理会报这个错... 解决 1.按照提示修改该类的配置,选择jar manif ...

  6. tcp的三次连接握手和四次释放握手

    http://blog.csdn.net/whuslei/article/details/6667471/ 这篇博客讲的很清楚. 下面我简单说明一下:三次连接握手,首先client发送请求报文,然后服 ...

  7. Java基础(Java概述、环境变量、注释、关键字、标识符、常量)

    第1天 Java基础语法 今日内容介绍 u Java开发环境搭建 u HelloWorld案例 u 注释.关键字.标识符 u 数据(数据类型.常量) 第1章 Java开发环境搭建 1.1 Java概述 ...

  8. Mind must be master of the body, strong mind can separate the body from its suffering.

    Mind must be master of the body, strong mind can separate the body from its suffering.意志是身体的主人,有顽强的意 ...

  9. java项目定时任务实现

    首先配置spring-context.xml文件 在xmlns 下加如下代码 xmlns:task="http://www.springframework.org/schema/task&q ...

  10. Windows下Python多版本共存

    Windows下Python多版本共存 Python数据科学安装Numby,pandas,scipy,matpotlib等(IPython安装pandas) 0.0 因为公司项目,需要Python两个 ...