深入了解vue路由的使用

时间：2021-09-05 来源：互联网编辑：宝哥软件园浏览：次

Vue-router是Vue.js的官方路由插件，与vue.js深度集成，适合构建单页应用。Vue的单页应用程序基于路由和组件。路由用于设置访问路径，并映射路径和组件。传统的页面应用程序使用超链接来切换和跳转页面。在vue-router单页应用中，是路径之间的切换，也就是组件的切换。

本文将以示例的形式介绍vue-router的各种特性，包括六个示例，每个示例都有一个乞丐版本，前五个示例都有一个皇帝版本。乞丐版是一个将所有代码混合在一起的HTML页面，皇帝版是基于vue-webpack-simple模板构建的。

第一单页申请(01)

现在我们从一个简单的单页应用开始vue-router的旅程，它有两个路径：/Home和/About，这两个路径对应两个组件：Home和About。

1.创建组件

首先介绍vue.js和vue-router.js:

Script src=' http : js/vue . js '/Script Script src=' http : js/vue-router . js '/Script然后创建两个组件构造函数Home和about:varhome=vue . extend({ template 3360 ' div h1 Home/h1p { { msg } }/p/div '，data : function(){ return { msg 3360 ' hello，vuerouter！'} } })var about=vue . extend({ template : ' div h1 about/h1 pt这是关于vue-Router的教程。/p/div'}) 2。创建路由器

Var router=new VueRouter()调用构造函数VueRouter创建路由器实例router。

3.绘制路线

router . map({ '/home ' : { component 3360 home }，'/about ' : { component : about } })调用路由器的map方法来映射路由，每条路由都以键值的形式存在，其中key是路径，value是组件。

例如，'/home '是路径的键，表示路径；{component: Home}表示此路由映射的组件。

4.使用垂直链接命令

div class=' list-group ' a class=' list-group-item ' v-link=' { path : '/home ' } ' home/a class=' list-group-item ' v-link=' { path : '/about ' } ' about/。

5.使用路由器视图选项卡

路由器视图/路由器视图使用页面上的路由器视图/路由器视图选项卡，用于呈现匹配的组件。

6.开始走路线

VarApp=vue . extend({ })router.start(App，' #app ')路由器需要一个根组件才能运行，router . start(App，' #app ')意味着路由器将创建一个App实例并将其挂载到# app元素上。

注意：使用vue-router的应用程序不需要显式创建vue实例，而是调用start方法将根组件挂载到元素中。

当您从GitHub获得最新的源代码时，如果您想运行皇帝版本，以demo01为例，在Git Bash下执行以下命令：

npm运行演示01-开发

然后，在浏览器中访问地址http://127 . 0 . 0。38860 . 88888888886

要编译和发布，请在Git Bash下执行以下命令：

Npm运行演示01-编写单页的构建步骤

以上六个步骤可以说是创建单页应用程序的基本步骤：

Java Script语言

1.创建组件：创建需要为单页应用程序呈现的组件

2.创建路由：创建一个虚拟路由器实例

3.map route:调用VueRouter实例的map方法

4.启动路由：调用VueRouter实例的启动方法

超文本标记语言

1.使用v-link命令

2.使用路由器视图选项卡

路由器.重定向

当应用程序第一次运行时，右侧是空白的，应用程序通常有一个主页，如主页。

使用router.redirect方法将根路径重定向到/home路径：

路由器。重定向({'/':'/home'})路由器。重定向方法用于定义路由器的全局重定向规则，全局重定向将在匹配当前路径之前执行。

执行过程

当用户点击v-link指令元素时，我们可以大致猜到中间发生了什么：

Vue-router将首先查找v-link指令的路由图，然后根据路由图找到匹配的组件，最后将组件渲染到router-view标签

嵌套路由(02)

嵌套路由是个常见的需求，假设用户能够通过路径/主页/新闻和/home/message访问一些内容，一个路径映射一个组件，访问这两个路径也会分别渲染两个组件。

实现嵌套路由有两个要点：

在组件内部使用路由器视图标签在路由器对象中给组件定义子路由现在我们就动手实现这个需求。

组件模板：

模板id=' home ' div h1 home/h1 p { { msg } }/p/div ul class=' nav-tab '阿利v-link=' { path : '/home/News ' } ' News/a/Li阿利v-link=' { path : '/home/message ' } ' Messages/a/Li/ul路由器-查看/路由器-视图/div/模板id=' News ' ul线路ws 01/Li线路ws 02/Li线路Ws 03/Li/ul/模板组件构造器：

var Home=vue。extend({ template : ' # Home '，data : function(){ return { msg : ' Hello，vue router！'} } })var News=vue。扩展({ template : ' # News ' })var Message=vue。扩展({模板： ' # Message ' })路由映射：

路由器。地图({"/Home": {组件： Home，//定义子路由子行： { '/News ' : {组件： News }，'/Message ' : {组件： Message } }，'/About ' : {组件： About } })在/home路由下定义了一个子路径选项，/新闻和/message是两条子路由，它们分别表示路径/主页/新闻和/home/message，这两条路由分别映射组件新闻和信息。

该示例运行如下：

注意：这里有一个概念要区分一下，/家庭/新闻和/home/message是/home路由的子路由，与之对应的新闻和消息组件并不是主页的子组件。

具名路径(03)

在有些情况下，给一条路径加上一个名字能够让我们更方便地进行路径的跳转，尤其是在路径较长的时候。

我们再追加一个组件新闻详情，该组件在访问/首页/新闻/细节路径时被渲染，组件模板：

模板id='新闻详细信息' div新闻详细信息-{ { $ route。参数。id } }./div/模板组件构造器：

var新闻详情=Vue。扩展({模板： ' #新闻细节' })具名路由映射

路由器。映射({“/Home”: {组件： Home，子行3360 {“/News”: {名称： ' News '，组件： News，子行3360 { ' detail/: id ' 33: {名称： ' detail '，组件： NewsDetail } })，“/Message”3: {组件3: Message } }，“/注意：我们在定义/家庭/新闻/和主页/新闻/详细信息/:id路由时，给该路由指定了名字属性。

/:id是路由参数，例如：如果要查看id='01 '的新闻详情，那么访问路径是/家庭/新闻/细节/01 .

主页组件和新闻组件模板：

模板id=' home ' div h1 home/h1 p { { msg } }/p/div ul class=' nav-tab '阿利v-link=' { name : ' News ' } ' News/a/Li阿利v-link=' { path : '/home/message ' } ' Messages/a/Li/ul路由器-查看/路由器-视图/div/模板id='新闻' div ul阿利v-link='{ name: 'detail '，params: { id:和a v-link='{ name: 'detail '，params 3360 { id : ' 01 ' } ' News 01/a这两行超文本标记语言代码，使用了用了具名路径。

该示例运行如下：

v形连杆指令

用了这么久的v形连杆指令，是该介绍一下它了。

v形连杆是一个用来让用户在某视频剪辑软件路由器应用的不同路径间跳转的指令。该指令接受一个Java脚本语言表达式，并会在用户点击元素时用该表达式的值去调用路由器。去吧。

具体来讲v形连杆有三种用法：

！-文字路径-a v-link=“home”home/a！-效果同上-a v-link=' { path : ' home ' } ' home/a！-命名路径-av-link=' {name:' detail '，params 3360 { id 3360 ' 01 ' } ' home/av-link将自动设置a的href属性，因此您不需要使用href来调整浏览器，原因如下：

它在HTML5历史模式和hash模式下的工作方式是一样的，所以如果你决定改变模式，或者IE9浏览器退化为hash模式，就不需要做任何改动了。

在HTML5历史模式下，v-link监听点击事件，防止浏览器试图重新加载页面。

在HTML5历史模式下使用根选项时，不需要在v-link的URL中包含根路径。

路由对象(04)

在使用vue-router的应用程序中，路由对象将被注入到每个组件中，其值将是这样的。$route，并且路由对象将在路由切换时更新。

路由对象公开以下属性：

$route.path

等于当前路由对象路径的字符串将被解析为绝对路径，如“/home/news”。

$路由. params

对象，该对象包含路由中动态片段和完全匹配片段的键值对

$route.query

对象，该对象包含路由中查询参数的键值对。例如，for /home/news/detail/01？收藏夹=是，您将获得$route.query .收藏夹=='yes '。

$route.router

路由规则所属的路由器(及其所属的组件)。

$route.matched

一个数组，包含与当前匹配路径中包含的所有片段对应的配置参数对象。

$route.name

当前路径的名称。如果不使用命名路径，则该名称为空。

将以下代码添加到页面以显示这些路由对象的属性：

Div pCurrent路径：{{$ route.path}}/p pCurrent参数：{$ route.params | JSON}}/p pRoute名称：{$ route.name}}/p pRoute查询参数：{$ route.query | JSON}}/p pRoute匹配项：{$ route }/p/div $ route。路径$ route。帕拉姆斯，路线。名字，路线。查询很容易理解。你可以通过看例子知道它们的意思。

($route.matched因为内容太长，所以不会显示在屏幕上。)

在这里，我想说一下$router.matched属性，它是一个包含性匹配，它将匹配所有嵌套的父路由。

例如，路径/主页/新闻/详细信息/:id包含三个匹配的路由：

1./主页/新闻/详细信息/:id

2./主页/新闻

3./home

此外，如果v-link对应的URL与当前路径匹配，则带有v-link指令的元素将添加一个默认名称为v-link-active的特定类。比如我们访问URL /home/news/detail/03时，根据匹配规则，会添加三个链接，v-link-active。

激活链接(05)

上图有两个问题：

1.当用户单击主页链接或关于链接时，该链接不会显示为选中状态

2.当用户单击新闻或消息链接时，该链接不会显示为选中状态

设置活动类

第一个问题可以通过设置v-link命令的activeClass来解决。

a='列表-组-项目' v-link='{ path: '/home '，active class : ' active ' } ' Home/aa='列表-组-项目' v-link='{ path: '/about '，active class : ' active ' } ' About/a

使用v-link命令集的activeClass属性，默认的v-link-active将被新类替换。

第二个问题，为v-link指令设置activeClass不起作用，因为我们使用的是bootstrap样式，我们需要设置一个标签的父元素li，使链接看起来是选中的，如下面的代码所示：

ul class=' nav-tab ' Li class=' active ' a v-link=' { path : '/home/news ' } ' news/a/Li v-link=' { path 3360 '/Home/message ' } ' messages/a/Li/ul如何实现您可能会想到在Home组件的数据选项中附加一个currentPath属性，然后按照以下方式绑定该类。

ul class=' nav-nav-tab ' Li : class=' CurrentPath=='/home/news '？'active ' : ' ' ' a v-link=' { path : '/home/News ' } ' News/a/Li Li : class=' currentPath=='/home/message '？'active ' : ' ' a v-link=' { path : '/home/message ' } ' messages/a/Li/ul现在有另一个问题。在什么情况下我们应该给currentPath赋值？

当用户点击v-link的元素时，就是路由的切换。

每个组件都有一个路由选项，路由选项有一系列钩子函数，在切换路由时执行。

钩子函数之一是数据钩子函数，用于加载和设置组件的数据。

var Home=vue . extend({ template : ' # Home '，data : function(){ return { msg : ' Hello，vue router！'，currentpath:''}}，route: {data3360函数(转换){transition。下一个({currentpath3360)过渡。去。path})}})这个例子的运行效果如下：

挂钩功能(06)

路由的切换过程本质上是执行一系列路由钩子功能，一般分为两类：

全局钩子函数组件的钩子函数在全局路由对象中定义，而组件的钩子函数在组件的路由选项中定义。

全局钩子函数

有两个全局钩子函数：

before each:call after路由切换开始时的每个：每次路由切换成功进入激活阶段时被调用组件的钩子函数

组件中有6个钩子函数：

数据：可以设置组件的数据激活：激活组件停用：禁用组件启用：是否可以激活组件启用：是否可以禁用组件可以重用：是否可以重用组件来切换对象

每个开关钩子函数接受一个转换对象作为参数。此开关对象包含以下功能和方法：

过渡到

表示要切换到的路径的路由对象。

过渡

表示当前路径的路由对象。

transition.next()

调用此函数来处理切换过程中的下一步。

transition . abort([原因])

调用此函数终止或拒绝此开关。

transition.redirect(路径)

取消当前切换，并重定向到另一条路由。

钩子函数的执行顺序

总共有八个全局钩子函数和组件钩子函数，所以为了掌握vue路由器的使用，有必要知道这些钩子函数的执行顺序。

为了直观地了解这些钩子函数的执行顺序，在屏幕上添加一个Vue实例：

var well=new Vue({ el: '。'嗯'，data: { msg: ' '，color: '#ff0000' }，methods : { setcolor : function(){ this . color=' # ' ParSeint(Math . random()* 256)。toString(16)parsent(math . random()* 256)。toString(16)parsent(math . random()* 256)。toString(16) }，setColoredMessage:函数(msg){ this . msg=' p style=' color : ' this . color ' ' ' msg '/p ' }，Settitle:函数(title){ this . msg=' H2 style=' color : # 333 ' ' title '/H2 ' } } }井实例的HTML:

div class=' well ' { { msg } }/div然后，添加一个RouteHelper函数来记录每个钩子函数的执行日志：

函数route helper(name){ var route={ can reuse 3360函数(transition) {well。setcoloredmessage('执行组件' name '的钩子函数' :canReuse') Return true}，可以激活：函数(transition) {well。setcolormessage(钩子函数：可以激活“正在执行的组件”名称)转换。next ()}，activate :function (transition) {well . setcolored message(hook function : activate ' of ' executing component ' name ')transition . next()}，可以停用： function(transition){ well。setcolormessage(名称为“:”的“执行组件”的钩子函数可以停用)转换。next ()}，Deactivate 3360功能(过渡){嗯。setcolormessage(钩子函数：停用“正在执行的组件”名称)转换。next ()}，Data :函数(跃迁){well。setcolor message(' hook function :执行组件' name '转换的数据。next ()}}返回路线；}最后，将这些钩子函数应用于每个组件：

var Home=vue . extend({ template : ' # Home '，data : function(){ return { msg : ' Hello，vue router！'，path: '' } }，route : route helper(' Home ')})var News=vue . extend({ template : ' # News '，route : route helper(' News ')})var Message=vue . extend({ template : ' # Message '，route : route helper(' Message ')})var about=vue . extend({ template 3360 ' # about '，route 3: route helper(')

1.运行应用程序(访问/主页路径)

2.访问/主页/新闻路径

3.访问/主页/消息路径

4.访问/关于路径