Vue-router是Vue.js的官方路由插件，与Vue.js深度融合，适合构建单页面应用。

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

本文将以实例的形式介绍vue路由器的特点。一共六个例子，每个例子都有乞丐版，前五个例子都有皇帝版。

乞丐版是一个将所有代码混合在一起的HTML页面，而皇帝版是基于vue-webpack-simple模板。

第一个单页面应用(01)

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

1. 创建组件

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

script src='js/vue.js'/script

脚本src='js/vue-router.js'/script

然后创建两个组件构造函数，Home和About:

var Home=Vue.extend({

模板：' divh1Home/h1p{{msg}}/p/div '，

数据：函数(){

返回{

msg:“你好，vue路由器！”

}

}

})

var About=Vue.extend({

模板：' div h1 about/h1p这是关于vue-router的教程。/p/div '

})

2. 创建Router

var router=new VueRouter()

调用构造函数VueRouter来创建路由器实例Router。

3.映射路线

router.map({

/home': { component: Home }，

/about': { component: About }

})

调用路由器的map方法来映射路由。每条路由都以key-value的形式存在，其中key是路径，value是组件。

比如：'/home '是一条路线的关键字，表示路径；{组件：主页}表示此路线映射的组件。

4.使用v-link命令

div class='list-group '

a class=' list-group-item ' v-link=' { path:'/Home ' } ' Home/a

a class=' list-group-item ' v-link=' { path:'/About ' } '关于/a

/div

在A元素上使用v-link指令跳转到指定的路径。

5. 使用router-view标签

路由器视图/路由器视图

使用页面上的路由器视图/路由器视图标签，该标签用于呈现匹配的组件。

6. 启动路由

var App=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.1:8080。

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

npm运行演示01-构建

编写单页面的步骤

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

JavaScript

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

2.创建路由：创建一个VueRouter实例。

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

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

HTML

1.使用v-link命令。

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

router.redirect

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

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

router.redirect({

/': '/home '

})

Router.redirect方法用于定义路由器的全局重定向规则，在匹配当前路径之前会执行全局重定向。

执行过程

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

vue路由器将首先寻找v-link指令的路线图。

然后根据线路图找到匹配的组件。

最终组件呈现在“路由器视图”选项卡上。

嵌套路由(02)

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

实现嵌套路由有两个关键点：

在组件内部使用路由器视图标记

为路由器对象中的组件定义子路由。

现在就开始实现这个需求吧。

组件：

模板id='主页'

差异

h1主页/h1

p{{msg}}/p

/div

差异

ul class='导航导航标签'

里

a v-link='{ path: '/home/news'} '新闻/a

/李

里

a v-link=' { path:'/home/message ' } '消息/a

/李

/ul

路由器视图/路由器视图

/div

/模板

模板id='新闻'

保险商实验所

新闻01/李

新闻02/李

新闻03/李

/ul

/模板

模板id='消息'

保险商实验所

li消息01/li

li消息02/li

li消息03/li

/ul

/模板

组件生成器：

var Home=Vue.extend({

模板：“#home”，

数据：函数(){

返回{

msg:“你好，vue路由器！”

}

}

})

var News=Vue.extend({

模板：“#新闻”

})

var Message=Vue.extend({

模板：' #message '

})

路线映射：

router.map({

/home': {

成分：家，

//定义子路由

子路由：{

/news': {

组件：新闻

},

/message': {

组件：消息

}

}

},

/about': {

组件：关于

}

})

子路由选项在/home route下定义。/News和/Message是两个子路由，分别代表路径/home/news和/home/message。这两条路线分别映射组件新闻和消息。

该示例运行如下：

注意：这里有个概念要区分。/Home/News和/home/Message是/home route的子路由，对应的新闻和消息组件不是Home的子组件。

具名路径(03)

在某些情况下，为路径添加名称可以使我们更容易跳过路径，尤其是当路径很长时。

让我们追加另一个组件NewsDetail，它在访问/home/news/detail路径时呈现。组件模板：

模板id='新闻详细信息'

差异

新闻详细信息- {{$route.params.id}}.

/div

/模板

组件生成器：

var NewsDetail=Vue.extend({

模板：“#新闻细节”

})

命名路由映射

router.map({

/home': {

成分：家，

子路由：{

/news': {

名称：“新闻”，

组件：新闻，

子路由：{

详细信息/:id ':

名称：'详细信息'，

组件：新闻详细信息

}

}

},

/message': {

组件：消息

}

}

},

/about': {

组件：关于

}

})

注意：当我们定义/home/news/和home/news/detail/:id路由时，我们为该路由指定了name属性。

/:id是路由参数，例如：如果要查看id='01 '的新闻详情，那么访问路径是/home/news/detail/01。

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

模板id='主页'

差异

h1主页/h1

p{{msg}}/p

/div

差异

ul class='导航导航标签'

里

a v-link='{ name: 'news'} '新闻/a

/李

里

a v-link=' { path:'/home/message ' } '消息/a

/李

/ul

路由器视图/路由器视图

/div

/模板

模板id='新闻'

差异

保险商实验所

里

a v-link='{ name: 'detail '，params: {id: '01'} } '新闻01/a

/李

里

a v-link=' { path:'/home/News/detail/02 ' } ' News 02/a

/李

里

a v-link=' { path:'/home/News/detail/03 ' } ' News 03/a

/李

/ul

差异

路由器视图/路由器视图

/div

/div

/模板

A-link=' {name:' news'}' news/a和AV-link=' {name:' detail '，params: {ID:' 01'}' news01/a，这两行HTML代码使用命名路径。

该示例运行如下：

v-link指令

用了这么久v-link命令，是时候介绍一下了。

V-link是用户在vue-router应用程序的不同路径之间跳转的指令。这个指令接受一个JavaScript表达式并调用router。当用户单击元素时，使用表达式的值。

具体来说，v-link有三种使用方式：

！-文字路径-

a v-link=''home''Home/a

！-效果同上-

a v-link='{ path: 'home' }'Home/a

！-命名路径-

a v-link='{ name: 'detail '，params: {id: '01'} }'Home/a

V-link会自动设置a的href属性，您不需要使用href来处理浏览器的调整，原因如下：

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

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

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

路由对象(04)

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

路由对象公开下列属性：

$route.path

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

$route.params

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

$route.query

包含路由中查询参数的键值对的对象。比如对于/home/news/detail/01？Favorite=yes，您将得到$route.query.favorite=='yes '。

$route.router

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

$route.matched

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

$route.name

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

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

差异

p当前路径：{{$route.path}}/p

p当前参数：{{$route.params | json}}/p

p路由名称：{{$route.name}}/p

p路由查询参数：{{$route.query | json}}/p

p路由匹配：{{$route.matched | json}}/p

/div

属性route.path、route.params、route.name和route.query很容易理解，您可以通过查看示例了解它们的含义。

($route.matched因其内容较长而不显示在屏幕上)

这里我要稍微讲一下$router.matched属性，这是一个包含性匹配，它会匹配所有嵌套它的父路由。

例如，路径/home/news/detail/:id包含3条匹配的路线：

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

2./首页/新闻

3./首页

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

激活链接(05)

上图有两个问题：

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

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

设置activeClass

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

a class=' list-group-item ' v-link=' { path:'/Home '，activeClass: 'active'}'Home/a

a class=' list-group-item ' v-link=' { path:'/About '，activeClass: 'active'}'About/a

在设置了v-link指令的activeClass属性之后，默认的v-link-active将被新的类替换。

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

ul class='导航导航标签'

李主动出击

a v-link='{ path: '/home/news'} '新闻/a

/李

里

a v-link=' { path:'/home/message ' } '消息/a

/李

/ul

如何达到这种效果？您可能会想到将currentPath属性附加到Home组件的data选项上，然后以下面的方式绑定该类。

ul class='导航导航标签'

李：家庭/新闻？活动“:”。

a v-link='{ path: '/home/news'} '新闻/a

/李

李：class=' current path=='/home/message '？'活动“:”。

a v-link=' { path:'/home/message ' } '消息/a

/李

/ul

现在又出现了一个问题。在什么情况下给当前路径赋值？

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

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

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

var Home=Vue.extend({

模板：“#home”，

数据：函数(){

返回{

msg:“你好，vue路由器！”,

当前路径：“”

}

},

路线：{

数据：函数(转换){

transition.next({

当前路径：transition.to.path

})

}

}

})

该示例运行如下：

钩子函数(06)

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

全局钩子函数

组件的钩子函数

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

全局钩子函数

有两个全局钩子函数：

BeforeEach:在路由交换开始时调用。

AfterEach:每次路由交换机成功进入激活阶段时调用。

组件的钩子函数

组件有六种挂钩功能：

数据：可以设置组件的数据。

激活：激活组件。

停用：禁用组件

可以激活：组件可以被激活吗？

CanDeactivate:可以禁用组件吗？

CanReuse:组件可以重用吗？

切换对象

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

transition.to

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

过渡。从

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

transition.next()

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

transition . abort([原因])

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

transition.redirect(path)

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

钩子函数的执行顺序

全局钩子函数和组件钩子函数的总数是8。为了掌握vue路由器的使用，需要了解这些钩子函数的执行顺序。

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

var well=new Vue({

艾尔：'。嗯，

数据：{

消息： ''，

颜色：' #ff0000 '

},

方法：{

setColor: function(){

this . color=' # ' parse int(math . random()* 256)。toString(16)

parseInt(Math.random()*256)。toString(16)

parseInt(Math.random()*256)。toString(16)

},

setColoredMessage:函数(消息){

this . msg=' p style=' color:' this . color ' ' ' msg '/p '

},

setTitle:功能(标题){

this . msg=' H2 style=' color:# 333 ' ' title '/H2 '

}

}

})

井实例的HTML:

div class='嗯'

{{{ msg }}}

/div

然后，添加一个RouteHelper函数来记录每个钩子函数的执行日志：

函数RouteHelper(name) {

var route={

canReuse:函数(转换){

Well.setColoredMessage('执行组件的钩子函数' name': canReuse ')

返回true

},

canActivate:函数(转换){

Well.setColoredMessage('执行组件' name '的钩子函数：canActivate ')

transition.next()

},

激活：功能(转换){

Well.setColoredMessage('执行组件' name '的钩子函数：activate ')

transition.next()

},

canDeactivate:函数(过渡){

Well.setColoredMessage('执行组件的钩子函数' name': canDeactivate ')

transition.next()

},

停用：功能(转换){

Well.setColoredMessage('执行组件' name '的钩子函数：deactivate ')

transition.next()

},

数据：函数(转换){

Well.setColoredMessage('执行组件的钩子函数' name': data ')

transition.next()

}

}

返回路线；

}

最后，这些钩子函数应用于每个组件：

var Home=Vue.extend({

模板：“#home”，

数据：函数(){

返回{

msg:“你好，vue路由器！”,

路径：“”

}

},

路由：RouteHelper('Home ')

})

var News=Vue.extend({

模板：“#新闻”，

路由：RouteHelper(“新闻”)

})

var Message=Vue.extend({

模板：“#message”，

路由：RouteHelper('消息')

})

var About=Vue.extend({

模板：“#about”，

路由：RouteHelper('About ')

})

让我们按照以下步骤做一个小实验：

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

2.访问/home/news路径

3.访问/home/message路径

4.访问/关于路径

切换控制流水线

当用户点击/home/news链接，然后点击/home/message链接时，vue-router做了什么？它执行一个交换流水线。

如何做到这一点？这个过程包括一些我们必须做的工作：

1.组件主目录可以重用，因为组件主目录在重新渲染后保持不变。

2.需要停用并删除组件新闻。

3.启用并激活组件消息。

4.在执行步骤2和3之前，必须确保切换效果有效。也就是说，确保切换中涉及的所有组件可以如预期的那样被去激活/激活。

切换的各个阶段

我们可以将路由切换分为三个阶段：可重用阶段、验证阶段和激活阶段。

我们以home/news切换到home/message为例描述一下每个阶段。(以下文字供参考：http://router.vuejs.org/zh-cn/pipeline/index.html)

1. 可重用阶段

检查当前视图结构中是否有可重用的组件。这是通过比较两个新的组件树，找出公共组件，然后检查它们的可重用性(通过canReuse选项)来完成的。默认情况下，所有组件都是可重用的，除非它们已经被定制。

2. 验证阶段

检查当前组件是否可以停用，以及新组件是否可以激活。这是通过在进路配置阶段调用canDeactivate和canActivate钩子函数来判断的。

3.激活阶段

一旦调用了所有的验证挂钩函数，并且没有终止切换，就可以认为切换是合法的。路由器开始禁用当前组件并启用新组件。

在这个阶段，相应的钩子函数按照与验证阶段相同的顺序被调用，其目的是在组件切换实际执行之前提供一个清理和准备的机会。界面的更新将一直等到所有受影响的组件的停用和激活钩子函数被执行。

这个数据钩子函数将在激活后被调用，或者当当前组件可以被重用时被调用。

这就是本文的全部内容。希望对大家的学习有帮助，支持我们。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。