Analyse zum Einsatz von Vue-Routing

Dieser Artikel stellt hauptsächlich die Nutzungsanalyse des Vue-Routings vor, die einen gewissen Referenzwert hat. Jetzt kann ich ihn mit allen teilen, die ihn brauchen.

Vue-Router ist das offizielle Routing von Vue. js-Plug-in, das tief in vue.js integriert ist und sich zum Erstellen von Single-Page-Anwendungen eignet.

vue-router ist das offizielle Routing-Plug-in von Vue.js. Es ist tief in vue.js integriert und eignet sich zum Erstellen von Single-Page-Anwendungen. Die Single-Page-Anwendung von Vue basiert auf Routing und Komponenten. Routing wird zum Festlegen von Zugriffspfaden und zum Zuordnen von Pfaden und Komponenten verwendet. Herkömmliche Seitenanwendungen verwenden einige Hyperlinks, um Seitenwechsel und -sprünge zu erreichen. In der Vue-Router-Single-Page-Anwendung wird zwischen Pfaden gewechselt, dh zwischen Komponenten.

In diesem Artikel werden die verschiedenen Funktionen von Vue-Router in Form von Beispielen vorgestellt. Er enthält insgesamt 6 Beispiele, und die ersten 5 Beispiele haben eine Kaiserversion.
Die Beggar-Version ist eine HTML-Seite, auf der der gesamte Code gemischt ist, und die Emperor-Version basiert auf der Vorlage vue-webpack-simple.

Die erste Single-Page-Anwendung (01)

Jetzt beginnen wir die Vue-Router-Reise mit einer einfachen Single-Page-Anwendung. Diese Single-Page-Anwendung hat zwei Pfade: /home und /about. Diesen beiden Pfaden entsprechen die beiden Komponenten Home und About.

1. Komponenten erstellen

Führen Sie zunächst vue.js und vue-router.js ein:

<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. Router erstellen

var router = new VueRouter()

Rufen Sie den Konstruktor VueRouter auf, um einen Router-Instanz-Router zu erstellen.

3. Routen zuordnen

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

Rufen Sie die Kartenmethode des Routers auf, um Routen zuzuordnen. Jede Route existiert in Form eines Schlüsselwerts, wobei der Schlüssel der Pfad ist Wert ist die Komponente.

Zum Beispiel: „/home“ ist der Schlüssel einer Route, der den Pfad darstellt; {component: Home} stellt die von der Route abgebildete Komponente dar.

4. Verwenden Sie die V-Link-Anweisung

<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>

Verwenden Sie die V-Link-Anweisung für das a-Element, um zum angegebenen Pfad zu springen.

5. Verwenden Sie das Tag welches zum Rendern passender Komponenten verwendet wird.

6. Routing starten

<router-view></router-view>

Hinweis: Anwendungen, die vue-router verwenden, müssen nicht explizit eine Vue-Instanz erstellen. Rufen Sie stattdessen die Startmethode auf, um die Root-Komponente in einem Element bereitzustellen.

Nachdem Sie den neuesten Quellcode von GitHub erhalten haben und die Emperor Edition ausführen möchten, nehmen Sie demo01 als Beispiel und führen Sie den folgenden Befehl unter Git Bash aus:

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

Besuchen Sie dann die Adresse http://127.0.0.1:8080

npm run demo01-dev

Schritte zum Schreiben einer einzelnen Seite

Die oben genannten 6 Schritte können als die grundlegenden Schritte zum Erstellen einer einseitigen Anwendung bezeichnet werden:

JavaScript

1. Komponenten erstellen, die in Einzelseitenanwendungen gerendert werden müssen

2. Routing erstellen: Erstellen Sie eine VueRouter-Instanz

3. Map-Routing: Rufen Sie die Map-Methode der VueRouter-Instanz auf

4. Starten Sie das Routing : Rufen Sie die Startmethode der VueRouter-Instanz auf

HTML

1. Verwenden Sie den V-Link-Befehl

2. Verwenden Sie tag

router.redirect

Wenn die Anwendung zum ersten Mal ausgeführt wird, ist die rechte Seite normalerweise leer Seite, wie zum Beispiel die Startseite.

Verwenden Sie die Methode router.redirect, um den Root-Pfad zum /home-Pfad umzuleiten:

npm run demo01-build

Ausführungsprozess

Wenn der Benutzer auf das V-Link-Befehlselement klickt, können wir ungefähr erraten, was passiert ist:

1. und findet dann die passende Komponente entsprechend der Routenzuordnung

2. Rendern Sie abschließend die Komponente in das Tag >
Geschachteltes Routing ist eine häufige Anforderung, dass Benutzer über die Pfade /home/news und /home/message auf einige Inhalte zugreifen können und durch den Zugriff auf diese beiden Pfade jeweils auch zwei Komponenten gerendert werden.

Verwenden Sie das -Tag innerhalb der Komponente

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

组件模板：

组件构造器：

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>

<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>

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

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;
 }
 }
})

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

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')
})