详解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 相关文章推荐
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 Javascript
JS中的prototype与面向对象的实例讲解
May 22 Javascript
jQuery动态设置form表单的enctype值(实现代码)
Jul 04 Javascript
Bootstrap每天必学之模态框(Modal)插件
Apr 26 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
Angular指令封装jQuery日期时间插件datetimepicker实现双向绑定示例
Jan 22 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
Vue动态加载异步组件的方法
Nov 21 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
PHP读取远程txt文档到数组并实现遍历
Aug 25 Javascript
jquery插件实现图片悬浮
Apr 16 jQuery
实例讲解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
使用sockets:从新闻组中获取文章(三)
2006/10/09 PHP
PHP Trait功能与用法实例分析
2020/06/03 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
js取值中form.all和不加all的区别介绍
2014/01/20 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
详解AngularJS 模态对话框
2016/04/07 Javascript
AngularJS 简单应用实例
2016/07/28 Javascript
jQuery EasyUI常用数据验证汇总
2016/09/18 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
2019/09/28 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
一起深入理解js中的事件对象
2021/02/06 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
[52:20]DOTA2-DPC中国联赛正赛 SAG vs XGBO3 第一场 3月5日
2021/03/11 DOTA
日常整理python执行系统命令的常见方法(全)
2015/10/22 Python
Python中max函数用于二维列表的实例
2018/04/03 Python
Python实现计算字符串中出现次数最多的字符示例
2019/01/21 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
wxpython多线程防假死与线程间传递消息实例详解
2019/12/13 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
Python局部变量与全局变量区别原理解析
2020/07/14 Python
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
国贸专业大学生职业生涯规划范文
2014/01/10 职场文书
黄金搭档广告词
2014/03/21 职场文书
出国留学计划书
2014/04/27 职场文书
后勤管理员岗位职责
2014/08/27 职场文书
高一语文教学反思
2016/02/16 职场文书
委托开发合同书(标准版)
2019/08/07 职场文书
python cv2图像质量压缩的算法示例
2021/06/04 Python
Python实现位图分割的效果
2021/11/20 Python
SQL语句多表联合查询的方法示例
2022/04/18 MySQL