详解vue路由篇(动态路由、路由嵌套)


Posted in Javascript onJanuary 27, 2019

什么是路由?网络原理中,路由指的是根据上一接口的数据包中的IP地址,查询路由表转发到另一个接口,它决定的是一个端到端的网络路径。

web中,路由的概念也是类似,根据URL来将请求分配到指定的一个'端'。(即根据网址找到能处理这个URL的程序或模块)
使用vue.js构建项目,vue.js本身就可以通过组合组件来组成应用程序;当引入vue-router后,我们需要处理的是将组件(components)映射到路由(routes),然后在需要的地方进行使用渲染。

一、基础路由

1、创建vue项目,执行vue init webpack projectName命令,默认安装vue-router。项目创建后,在主组件App.vue中的HTML部分:

<template>
 <div id="app">
  <router-view/>
 </div>
</template>

上述代码中,<router-view/>是路由出口,路由匹配到的组件将渲染在这里。

2、文件router/index.js中:

import Vue from 'vue' // 导入vue插件
import Router from 'vue-router' // 导入vue-router
import HelloWorld from '@/components/HelloWorld' // 导入HelloWorld组件

Vue.use(Router) // 引入vue-router
export default new Router({
 routes: [
  {
   path: '/', // 匹配路由的根路径
   name: 'HelloWorld',
   component: HelloWorld
  }
 ]
})

以上代码比较简单,一般的导入、引用操作,其中Vue.use()具体什么作用?

个人理解:Vue.use(plugin, arguments)就是执行一个plugin函数,或执行plugin的install方法进行插件注册(如果plugin是一个函数,则执行;若是一个插件,则执行plugin的install方法...);并向plugin或其install方法传入Vue对象作为第一个参数;如果有多个参数,use的其它参数作为plugin或install的其它参数。(具体需要分析源码,在此不再过多解释)

二、动态路由

什么是动态路由?动态路由是指路由器能够自动的建立自己的路由表,并且能够根据实际情况的变化实时地进行调整。

1、在vue项目中,使用vue-router如果进行不传递参数的路由模式,则称为静态路由;如果能够传递参数,对应的路由数量是不确定的,此时的路由称为动态路由。动态路由,是以冒号为开头的(:),例子如下:

export default new Router({
 routes: [
  {
   path: '/',
   name: 'HelloWorld',
   component: HelloWorld
  }, {
   path: '/RouterComponents/:id',
   name: 'RouterComponents',
   component: RouterComponents
  }
 ]
})

2、路由跳转,执行方式有两大类;

第一大类:router-link模式,直接把参数写在to属性里面:

<router-link :to="{name:'RouterComponents',params:{id:110}}">跳转</router-link>

第二大类:$router.push()模式,代码如下:

methods: {
  changeFuc (val) {
   this.$router.push({
    name: 'RouterComponents',
    params: {id: val}
   })
  }
}

或者:

methods: {
  changeFuc (val) {
   this.$router.push({
    path: `/RouterComponents/${val}`,
   })
  }
}

三、嵌套路由

vue项目中,界面通常由多个嵌套的组件构成;同理,URL中的动态路由也可以按照某种结构对应嵌套的各层组件:

export default new Router({
 routes: [
  {
   path: '/', // 根路由
   name: 'HelloWorld',
   component: HelloWorld
  }, {
   path: '/RouterComponents/:id',
   component: RouterComponents,
   children: [
    {
     path: '', // 默认路由
     name: 'ComponentA', // 当匹配上RouterComponents后,默认展示在<router-view>中
     component: ComponentA
    },
    {
     path: '/ComponentB',
     name: 'ComponentB',
     component: ComponentB
    },
   ]
  }
 ]
})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
JS实现的自定义右键菜单实例二则
Sep 01 Javascript
ionic 上拉菜单(ActionSheet)实例代码
Jun 06 Javascript
解析预加载显示图片艺术
Dec 05 Javascript
js仿百度音乐全选操作
Jan 13 Javascript
Angularjs上传文件组件flowjs功能
Aug 07 Javascript
关于JavaScript的单双引号嵌套问题
Aug 20 Javascript
vue2 前端搜索实现示例
Feb 26 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
深入学习JavaScript中的bom
May 27 Javascript
部署vue+Springboot前后端分离项目的步骤实现
May 31 Javascript
实例讲解JS中pop使用方法
Jan 27 #Javascript
Vue.js实现的购物车功能详解
Jan 27 #Javascript
JS温故而知新之变量提升和时间死区
Jan 27 #Javascript
vue组件文档(.md)中如何自动导入示例(.vue)详解
Jan 25 #Javascript
命令行批量截图Node脚本示例代码
Jan 25 #Javascript
Node.js 进程平滑离场剖析小结
Jan 24 #Javascript
Vue.js样式动态绑定实现小结
Jan 24 #Javascript
You might like
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
在PHP的图形函数中显示汉字
2006/10/09 PHP
QueryPath PHP 中的jQuery
2010/04/11 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
PHP 生成微信红包代码简单
2016/03/25 PHP
Laravel框架源码解析之反射的使用详解
2020/05/14 PHP
javascript Math.random()随机数函数
2009/11/04 Javascript
window.location.hash 使用说明
2010/11/08 Javascript
jQuery实现随意改变div任意属性的名称和值(部分原生js实现)
2013/05/28 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
JavaScript中5种调用函数的方法
2015/03/12 Javascript
使用jQuery实现更改默认alert框体
2015/04/13 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
异步安全加载javascript文件的方法
2015/07/21 Javascript
jQuery实现的多级下拉菜单效果代码
2015/08/24 Javascript
浅析javascript的return语句
2015/12/15 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
boostrapTable的refresh和refreshOptions区别浅析
2017/01/22 Javascript
用JS实现简单的登录验证功能
2017/07/28 Javascript
微信小程序上传图片实例
2018/05/28 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
解决seaborn在pycharm中绘图不出图的问题
2018/05/24 Python
Python3.5常见内置方法参数用法实例详解
2019/04/29 Python
快速解决pyqt5窗体关闭后子线程不同时退出的问题
2019/06/19 Python
python中return的返回和执行实例
2019/12/24 Python
Python qrcode 生成一个二维码的实例详解
2020/02/12 Python
matlab灰度图像调整及imadjust函数的用法详解
2020/02/27 Python
Asics日本官网:鬼冢八喜郎创立的跑鞋运动品牌
2017/10/18 全球购物
月度优秀员工获奖感言
2014/08/16 职场文书
小学生关于梦想的演讲稿
2014/08/22 职场文书
2015-2016年小学教导工作总结
2015/07/21 职场文书
2015年主婚人婚礼致辞
2015/07/28 职场文书