详解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 相关文章推荐
javascript json 新手入门文档
Dec 03 Javascript
Javascript string 扩展库代码
Apr 09 Javascript
jquery实用代码片段集合
Aug 12 Javascript
JavaScript在多浏览器下for循环的使用方法
Nov 07 Javascript
JS实现鼠标单击与双击事件共存
Mar 08 Javascript
JavaScript对HTML DOM使用EventListener进行操作
Oct 21 Javascript
JavaScript function函数种类详解
Feb 22 Javascript
Js获取图片原始宽高的实现代码
May 17 Javascript
AngularJS基础 ng-model-options 指令简单示例
Aug 02 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
node.js中Buffer缓冲器的原理与使用方法分析
Nov 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
PHP如何抛出异常处理错误
2011/03/02 PHP
PHP输入流php://input介绍
2012/09/18 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
linux下编译安装memcached服务
2014/08/03 PHP
PHP对文件夹递归执行chmod命令的方法
2015/06/19 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
风吟的小型JavaScirpt库 (FY.JS).
2010/03/09 Javascript
jquery 结合C#后台的数组对文章的关键字自动添加链接的代码
2011/07/15 Javascript
javascript中的self和this用法小结
2014/02/08 Javascript
js使用栈来实现10进制转8进制与取除数及余数
2014/06/11 Javascript
快速掌握Node.js中setTimeout和setInterval的使用方法
2016/03/21 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
Bootstrap框架结合jQuery仿百度换肤功能实例解析
2016/09/17 Javascript
js调用屏幕宽度的简单方法
2016/11/14 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
JavaScript闭包原理与用法实例分析
2018/08/10 Javascript
vue请求服务器数据后绑定不上的解决方法
2019/10/30 Javascript
JavaScript实现省市联动效果
2019/11/22 Javascript
PHP 502bad gateway原因及解决方案
2020/11/13 Javascript
[01:06]DOTA2亚洲邀请赛专属珍藏-荧煌之礼
2017/03/24 DOTA
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
pycharm中成功运行图片的配置教程
2018/10/28 Python
python导入模块交叉引用的方法
2019/01/19 Python
python pygame实现挡板弹球游戏
2019/11/25 Python
python 实现dict转json并保存文件
2019/12/05 Python
pytorch 中pad函数toch.nn.functional.pad()的用法
2020/01/08 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
英国领先的办公用品供应商:Viking
2016/08/01 全球购物
施华洛世奇西班牙官网:SWAROVSKI西班牙
2019/06/06 全球购物
课改先进个人汇报材料
2014/01/26 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js
Python爬虫基础之初次使用scrapy爬虫实例
2021/06/26 Python
一篇文章弄清楚Ajax请求的五个步骤
2022/03/17 Javascript