Vue Routing 활용 분석

이 글은 주로 참고할 가치가 있는 Vue 라우팅의 사용 분석을 소개합니다. 이제 모든 사람과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

vue-router는 Vue.js의 공식 라우팅 플러그인입니다. vue.js와 동일하며 단일 페이지 애플리케이션을 구축하는 데 적합합니다.

vue-router는 Vue.js의 공식 라우팅 플러그인으로 vue.js와 긴밀하게 통합되어 있으며 단일 페이지 애플리케이션을 구축하는 데 적합합니다. Vue의 단일 페이지 애플리케이션은 라우팅 및 구성 요소를 기반으로 합니다. 라우팅은 액세스 경로를 설정하고 경로 및 구성 요소를 매핑하는 데 사용됩니다. 기존 페이지 애플리케이션은 일부 하이퍼링크를 사용하여 페이지 전환 및 점프를 수행합니다. vue-router 단일 페이지 애플리케이션에서는 경로 간 전환, 즉 구성 요소 전환이 이루어집니다.

이 글에서는 vue-router의 다양한 기능을 예제 형식으로 소개합니다. 총 6개의 예제가 포함되어 있습니다. 각 예제에는 거지 버전이 있고 처음 5개 예제에는 황제 버전이 있습니다.
거지 버전은 모든 코드가 혼합된 HTML 페이지이고, 황제 버전은 vue-webpack-simple 템플릿을 기반으로 구축되었습니다.

첫 번째 단일 페이지 애플리케이션(01)

이제 간단한 단일 페이지 애플리케이션으로 vue-router 여행을 시작합니다. 이 단일 페이지 애플리케이션에는 /home과 /about이라는 두 가지 경로가 있습니다. 경로는 Home과 About의 두 구성 요소에 해당합니다.

1. 구성요소 생성

먼저 vue.js 및 vue-router.js를 소개합니다.

<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>

然后创建两个组件构造器Home和About：
var Home = Vue.extend({
 template: &#39;<p><h1>Home</h1><p>{{msg}}</p></p>&#39;,
 data: function() {
 return {
  msg: &#39;Hello, vue router!&#39;
 }
 }
})

var About = Vue.extend({
 template: &#39;<p><h1>About</h1><p>This is the tutorial about vue-router.</p></p>&#39;
})

2. 라우터 생성

var router = new VueRouter()

생성자 VueRouter를 호출하여 라우터 인스턴스 라우터를 생성합니다.

3. 경로 매핑

router.map({
 '/home': { component: Home },
 '/about': { component: About }
})

경로를 매핑하려면 라우터의 매핑 메서드를 호출하세요. 각 경로는 키-값 형식으로 존재하며, 여기서 키는 경로이고 값은 구성요소입니다.

예: '/home'은 경로를 나타내는 경로의 키입니다. {comComponent: Home}은 경로에 의해 매핑된 구성 요소를 나타냅니다.

4. v-link 명령을 사용하세요

<p class="list-group">
 <a class="list-group-item" v-link="{ path: &#39;/home&#39;}">Home</a>
 <a class="list-group-item" v-link="{ path: &#39;/about&#39;}">About</a>
</p>

a 요소에 v-link 명령을 사용하여 지정된 경로로 점프하세요.

5. 태그를 사용하세요.

<router-view></router-view>

페이지에서 일치하는 구성요소를 렌더링하는 데 사용되는 <router-view></router-view> 태그를 사용하세요.

6. 라우팅 시작

var App = Vue.extend({})
router.start(App, '#app')

라우터 작동에는 루트 구성 요소가 필요합니다. router.start(App, '#app')는 라우터가 App 인스턴스를 생성하고 이를 #app 요소에 마운트한다는 의미입니다.

참고: vue-router를 사용하는 애플리케이션은 Vue 인스턴스를 명시적으로 생성할 필요가 없습니다. 대신 start 메서드를 호출하여 루트 구성 요소를 요소에 마운트하세요.

GitHub에서 최신 소스 코드를 얻은 후 Emperor Edition을 실행하려면 데모01을 예로 들어 Git Bash에서 다음 명령을 실행하세요.

npm run demo01-dev

그런 다음 다음 주소를 방문하세요. browser http://127.0.0.1:8080

컴파일하고 게시하려면 Git Bash에서 다음 명령을 실행하세요.

npm run demo01-build

단일 페이지 작성 단계

위의 6단계는 다음과 같습니다. 단일 페이지 생성 페이지 애플리케이션의 기본 단계:

JavaScript

1. 구성 요소 생성: 단일 페이지 애플리케이션용으로 렌더링해야 하는 구성 요소 생성

2 경로 생성: VueRouter 인스턴스 생성

3. 경로 매핑: VueRouter 인스턴스의 매핑 메서드 호출

4. 라우팅 시작: VueRouter 인스턴스의 시작 메서드 호출

HTML

1. 2. 태그를 사용하세요

router.redirect

애플리케이션을 처음 실행하면 일반적으로 홈 페이지와 같은 홈 페이지가 비어 있습니다.

root 경로를 /home 경로로 리디렉션하려면 router.redirect 메서드를 사용하세요.

router.redirect({
 '/': '/home'
})

router.redirect 메서드는 라우터에 대한 전역 리디렉션 규칙을 정의하는 데 사용됩니다. 전역 리디렉션은 현재 경로와 일치하기 전에 실행됩니다. .

실행 프로세스

사용자가 v-link 명령어 요소를 클릭하면 무슨 일이 일어날지 대략 추측할 수 있습니다.

vue-router는 먼저 v-link 명령어의 라우팅 매핑을 찾습니다

1. 그런 다음 경로 매핑에 따라 일치하는 구성 요소를 찾습니다

2. 마지막으로 구성 요소를 태그에 렌더링합니다

중첩 라우팅(02)

중첩 라우팅은 일반적인 요구 사항입니다. , 사용자가 /home/news 및 /home/message 경로를 통해 일부 콘텐츠에 액세스할 수 있다고 가정하면 하나의 경로는 하나의 구성 요소를 매핑하고 이 두 경로에 액세스하면 각각 두 개의 구성 요소도 렌더링됩니다.

중첩 라우팅을 구현하는 데는 두 가지 핵심 사항이 있습니다.

컴포넌트 내부에 태그를 사용하세요

在路由器对象中给组件定义子路由

现在我们就动手实现这个需求。

组件模板：

组件构造器：

var Home = Vue.extend({
 template: '#home',
 data: function() {
 return {
  msg: 'Hello, vue router!'
 }
 }
})

var News = Vue.extend({
 template: '#news'
})

var Message = Vue.extend({
 template: '#message'
})

路由映射：

router.map({
 '/home': {
 component: Home,
 // 定义子路由
 subRoutes: {
  '/news': {
  component: News
  },
  '/message': {
  component: Message
  }
 }
 },
 '/about': {
 component: About
 }
})

在/home路由下定义了一个subRoutes选项，/news和/message是两条子路由，它们分别表示路径/home/news和/home/message，这两条路由分别映射组件News和Message。

该示例运行如下：

注意：这里有一个概念要区分一下，/home/news和/home/message是/home路由的子路由，与之对应的News和Message组件并不是Home的子组件。

具名路径(03)

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

我们再追加一个组件NewsDetail，该组件在访问/home/news/detail路径时被渲染，组件模板：

<template id="newsDetail">
 <p>
 News Detail - {{$route.params.id}} ......
 </p>
</template>

组件构造器：

var NewsDetail = Vue.extend({
 template: '#newsDetail'
})

具名路由映射

router.map({
 '/home': {
 component: Home,
 subRoutes: {
  '/news': {
  name: 'news',
  component: News,
  subRoutes: {
   'detail/:id': {
   name: 'detail',
   component: NewsDetail
   }
  }
  },
  '/message': {
  component: Message
  }
 }
 },
 '/about': {
 component: About
 }
})

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

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

Home组件和News组件模板：

News和News 01这两行HTML代码，使用了用了具名路径。

该示例运行如下：

v-link指令

用了这么久的v-link指令，是该介绍一下它了。

v-link 是一个用来让用户在 vue-router 应用的不同路径间跳转的指令。该指令接受一个 JavaScript 表达式，并会在用户点击元素时用该表达式的值去调用 router.Go。

具体来讲，v-link有三种用法：

<!-- 字面量路径 -->
<a v-link="&#39;home&#39;">Home</a>

<!-- 效果同上 -->
<a v-link="{ path: &#39;home&#39; }">Home</a>

<!-- 具名路径 -->
<a v-link="{ name: &#39;detail&#39;, params: {id: &#39;01&#39;} }">Home</a>

v-link 会自动设置 的 href 属性，你无需使用href来处理浏览器的调整，原因如下：

它在 HTML5 history 模式和 hash 模式下的工作方式相同，所以如果你决定改变模式，或者 IE9 浏览器退化为 hash 模式时，都不需要做任何改变。

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

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

路由对象(04)

在使用了 vue-router 的应用中，路由对象会被注入每个组件中，赋值为 this.$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>
 <p>当前路径：{{$route.path}}</p>
 <p>当前参数：{{$route.params | json}}</p>
 <p>路由名称：{{$route.name}}</p>
 <p>路由查询参数：{{$route.query | json}}</p>
 <p>路由匹配项：{{$route.matched | json}}</p>
</p>

$route.path, $route.params, $route.name, $route.query这几个属性很容易理解，看示例就能知道它们代表的含义。

（由于$route.matched内容较长，所以没有将其显示在画面上）

这里我要稍微说一下$router.matched属性，它是一个包含性的匹配，它会将嵌套它的父路由都匹配出来。

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

1./home/news/detail/:id

2./home/news

3./home

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

让链接处于活跃状态(05)

以上画面存在两个问题：

1.当用户点击Home链接或About链接后，链接没有显示为选中

2.当用户点击News或Message链接后，链接没有显示为选中

设置activeClass

第1个问题，可以通过设定v-link指令的activeClass解决。

<a class="list-group-item" v-link="{ path: &#39;/home&#39;, activeClass: &#39;active&#39;}">Home</a>
<a class="list-group-item" v-link="{ path: &#39;/about&#39;, activeClass: &#39;active&#39;}">About</a>

设定了v-link指令的activeClass属性后，默认的v-link-active被新的class取代。

第2个问题，为v-link指令设定activeClass是不起作用的，因为我们使用的是bootstrap的样式，需要设置a标签的父元素

才能让链接看起来处于选中状态，就像下面的代码所展现的：

<ul class="nav nav-tabs">
 <li class="active">
 <a v-link="{ path: &#39;/home/news&#39;}">News</a>
 </li>
 <li>
 <a v-link="{ path: &#39;/home/message&#39;}">Messages</a>
 </li>
</ul>

如何实现这个效果呢？你可能会想到，为Home组件的data选项追加一个currentPath属性，然后使用以下方式绑定class。

<ul class="nav nav-tabs">
 <li :class="currentPath == &#39;/home/news&#39; ? &#39;active&#39;: &#39;&#39;">
 <a v-link="{ path: &#39;/home/news&#39;}">News</a>
 </li>
 <li :class="currentPath == &#39;/home/message&#39; ? &#39;active&#39;: &#39;&#39;">
 <a v-link="{ path: &#39;/home/message&#39;}">Messages</a>
 </li>
</ul>

现在又出现了另一个问题，在什么情况下给currentPath赋值呢？

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

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

其中一个钩子函数是data钩子函数，它用于加载和设置组件的数据。

var Home = Vue.extend({
 template: '#home',
 data: function() {
 return {
  msg: 'Hello, vue router!',
  currentPath: ''
 }
 },
 route: {
 data: function(transition){
  transition.next({
  currentPath: transition.to.path
  })
 }
 }
})

该示例运行效果如下：

钩子函数(06)

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

1. 全局的钩子函数

2. 组件的钩子函数

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

全局钩子函数

全局钩子函数有2个：

1. beforeEach：在路由切换开始时调用

2. afterEach：在每次路由切换成功进入激活阶段时被调用

组件的钩子函数

组件的钩子函数一共6个：

1. data：可以设置组件的data

2. activate：激活组件

3. deactivate：禁用组件

4. canActivate：组件是否可以被激活

5. canDeactivate：组件是否可以被禁用

6. canReuse：组件是否可以被重用

切换对象

每个切换钩子函数都会接受一个 transition 对象作为参数。这个切换对象包含以下函数和方法：

transition.to

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

transition.from

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

transition.next()

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

transition.abort([reason])

调用此函数来终止或者拒绝此次切换。

transition.redirect(path)

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

钩子函数的执行顺序

全局钩子函数和组件钩子函数加起来一共8个，为了熟练vue router的使用，有必要了解这些钩子函数的执行顺序。

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

var well = new Vue({
 el: '.well',
 data: {
 msg: '',
 color: '#ff0000'
 },
 methods: {
 setColor: function(){
  this.color = '#' + parseInt(Math.random()*256).toString(16)
   + parseInt(Math.random()*256).toString(16)
   + parseInt(Math.random()*256).toString(16)
 },
 setColoredMessage: function(msg){
  this.msg += &#39;<p style="color: &#39; + this.color + &#39;">&#39; + msg + &#39;</p>&#39;
 },
 setTitle: function(title){
  this.msg = &#39;<h2 style="color: #333">&#39; + title + &#39;</h2>&#39;
 }
 }
})

well实例的HTML：

<p class="well">
 {{{ msg }}}
</p>

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

function RouteHelper(name) {
 var route = {
 canReuse: function(transition) {
  well.setColoredMessage('执行组件' + name + '的钩子函数:canReuse')
  return true
 },
 canActivate: function(transition) {
  well.setColoredMessage('执行组件' + name + '的钩子函数:canActivate')
  transition.next()
 },
 activate: function(transition) {
  well.setColoredMessage('执行组件' + name + '的钩子函数:activate')
  transition.next()
 },
 canDeactivate: function(transition) {
  well.setColoredMessage('执行组件' + name + '的钩子函数:canDeactivate')
  transition.next()
 },
 deactivate: function(transition) {
  well.setColoredMessage('执行组件' + name + '的钩子函数:deactivate')
  transition.next()
 },
 data: function(transition) {
  well.setColoredMessage('执行组件' + name + '的钩子函数:data')
  transition.next()
 }
 }
 return route;
}

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

var Home = Vue.extend({
 template: '#home',
 data: function() {
 return {
  msg: 'Hello, vue router!',
  path: ''
 }
 },
 route: RouteHelper('Home')
})

var News = Vue.extend({
 template: '#news',
 route: RouteHelper('News')
})

var Message = Vue.extend({
 template: '#message',
 route: RouteHelper('Message')
})

var About = Vue.extend({
 template: '#about',
 route: RouteHelper('About')
})

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

1.运行应用（访问/home路径）

2.访问/home/news路径

3.访问/home/message路径

4.访问/about路径

 切换控制流水线

当用户点击了/home/news链接，然后再点击/home/message链接后，vue-router做了什么事情呢？它执行了一个切换管道

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

1.可以重用组件Home，因为重新渲染后，组件Home依然保持不变。

2.需要停用并移除组件News。

3.启用并激活组件Message。

4. 2단계와 3단계를 수행하기 전에 전환 효과가 유효한지 확인해야 합니다. 즉, 전환과 관련된 모든 구성 요소가 예상대로 비활성화/활성화될 수 있는지 확인해야 합니다.

다양한 스위칭 단계

라우팅 스위칭은 재사용 단계, 검증 단계, 활성화 단계의 세 단계로 나눌 수 있습니다.

각 단계를 설명하기 위해 홈/뉴스에서 홈/메시지로 전환하는 것을 예로 들어보겠습니다. (다음 텍스트 설명을 참조하세요: http://router.vuejs.org/zh-cn/pipeline/index.html)

1. 재사용 가능 스테이지#🎜 🎜 #

현재 뷰 구조에 재사용 가능한 구성요소가 있는지 확인하세요. 이는 두 개의 새로운 구성 요소 트리를 비교하고 공유 구성 요소를 식별한 다음 재사용성을 확인함으로써 수행됩니다(canReuse 옵션을 통해). 기본적으로 모든 구성요소는 사용자 정의하지 않는 한 재사용이 가능합니다.

2. 확인 단계

현재 구성 요소를 비활성화하고 새 구성 요소를 사용할 수 있는지 확인하세요. 구성 요소를 활성화할 수 있는지 여부입니다. 이는 라우팅 구성 단계에서 canDeactivate 및 canActivate 후크 함수를 호출하여 판단됩니다.

3. 활성화 단계

일단 모든 확인 후크 기능이 호출되고 핸드오버를 종료하지 않고 핸드오버는 합법적인 것으로 간주될 수 있습니다. 그런 다음 라우터는 현재 구성 요소를 비활성화하고 새 구성 요소를 활성화하기 시작합니다.

이 단계에서 해당 Hook 함수를 호출하는 순서는 검증 단계와 동일합니다. 구성 요소 전환이 실제로 실행되기 전에 준비하십시오. 영향을 받는 모든 구성 요소의 비활성화 및 활성화 후크 기능이 실행될 때까지 인터페이스가 업데이트됩니다.

data 이 후크 함수는 활성화된 후 또는 현재 구성 요소 구성 요소를 재사용할 수 있을 때 호출됩니다.

위 내용은 모두의 학습에 도움이 되기를 바랍니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

vue.extend는 경고 모달 상자 팝업 구성 요소를 구현합니다.

vue에서 sass 전역 변수를 도입하는 방법에 대한 분석

Vue에서 기록 모드 패키징을 라우팅한 후 빈 페이지 문제를 해결하는 방법#🎜🎜 ##🎜 🎜#

위 내용은 Vue Routing 활용 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!