详解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+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
Apr 25 Javascript
javascript实现的元素拖动函数宿主为浏览器
Jul 21 Javascript
基于Javascript实现返回顶部按钮
Feb 29 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
Oct 16 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
javascrit中undefined和null的区别详解
Apr 07 Javascript
Vue-Cli项目优化操作的实现
Oct 27 Javascript
js实现随机点名程序
Sep 17 Javascript
使用Vue+Django+Ant Design做一个留言评论模块的示例代码
Jun 01 Javascript
Node.js实现断点续传
Jun 23 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
php版微信自定义回复功能示例
2016/12/05 PHP
一个无限级XML绑定跨框架菜单(For IE)
2007/01/27 Javascript
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
js中this的用法实例分析
2015/01/10 Javascript
在Mac OS下使用Node.js的简单教程
2015/06/24 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
JS实现图片放大缩小的方法
2017/02/15 Javascript
[56:24]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#1Liquid VS MVP.Phx第二局
2016/03/04 DOTA
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
python实现的二叉树算法和kmp算法实例
2014/04/25 Python
利用Python中的输入和输出功能进行读取和写入的教程
2015/04/14 Python
Python爬虫实现百度图片自动下载
2018/02/04 Python
python使用tornado实现登录和登出
2018/07/28 Python
python实现zabbix发送短信脚本
2018/09/17 Python
python批量修改图片后缀的方法(png到jpg)
2018/10/25 Python
PyQt5实现五子棋游戏(人机对弈)
2020/03/24 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
Python3爬虫关于识别检验滑动验证码的实例
2020/07/30 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
canvas生成带二维码海报的踩坑记录
2019/09/11 HTML / CSS
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
不用游标的SQL语句有哪些
2012/09/07 面试题
机械绘图员岗位职责
2013/11/19 职场文书
社区活动总结报告
2014/05/05 职场文书
代办委托书怎么写
2014/08/01 职场文书
党员干部公开承诺书范文
2015/04/27 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
幼儿园庆元旦主持词
2015/07/06 职场文书
利用Selenium添加cookie实现自动登录的示例代码(fofa)
2021/05/08 Python
python基础之模块的导入
2021/10/24 Python