vue component标签_25. vue-router

重点：

路由的跳转；
路由参数的传递；

---

安装 vue-router

在使用 vue-cli 初始化项目时，会提示我们是否要安装 vue-router（路由），如：

一般项目中，我们都会用到路由，所以选择“y”，安装路由。

路由的跳转

我们先来看一个简单的路由文件 index.js ：

import Vue from 'vue'
import Router from 'vue-router'  // 1. 引入 vue-router
import HelloWorld from '@/components/HelloWorld'
import HelloEarth from '@/components/HelloEarth'

Vue.use(Router)  // 2. 使用 vue-router

export default new Router({
  routes: [  // 3. 配置路由
    {
      path: '/helloworld',  // 第一个路由，路径为 /helloworld，跳转到 HelloWorld 组件
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/helloearth',  // 第二个路由，路径为 /helloearth，跳转到 HelloEarth 组件
      name: 'HelloEarth',
      component: HelloEarth
    }
  ]
})

上面的 index.js 文件中，设置了两个路由，当输入不同网址时，就会显示不同的组件内容。

但是你不可能让用户每次都在地址栏中输入地址来实现跳转，所以我们可以以链接的形式，当用户点击某一个链接时，实现跳转。比如，我们可以在某个组件中写到：

<template>
    <ul>
        <li>
            <router-link to="/helloworld">  // 这里的 /helloworld 对应 index.js（路由文件）中的路径（path）
                Hello World
            </router-link>
        </li>
        <li>
            <router-link to="/helloearth">  // 这里的 /helloearth 与上同理
                Hello Earth
            </router-link>
        </li>
    </ul>
</template>

这样，当用户点击 “Hello World”时，浏览器的地址栏就会走 /helloworld 路径，显示 HelloWorld 组件；当点击“Hello Earth”时，浏览器的地址栏就会走 /helloearth 路径，显示 HelloEarth 组件。

当然，前提是你必须使用 router-view 标签，来确定视图加载的位置。如，在根组件 App.vue 中，可以写到：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>  // 路由中相应的组件，将在这里显示，如果换到 img 标签的上面，就在上面显示
  </div>
</template>

如果不指定 router-view，那么你会看到浏览器地址栏中的地址已经跳转了，但是却没有显示对应组件的内容。

路由参数的传递

路由传递参数时，有两点是必须的：

1. 必须在路由内加入路由的 name；
2. 比如在 path 后加“/:传递的参数”。

还是上面那个路由文件 index.js，现在我们在 path 后面加上传递的参数：

import Vue from 'vue'
import Router from 'vue-router'  // 1. 引入 vue-router
import HelloWorld from '@/components/HelloWorld'
import HelloEarth from '@/components/HelloEarth'

Vue.use(Router)  // 2. 使用 vue-router

export default new Router({
  routes: [  // 3. 配置路由
    {
      path: '/helloworld/:worldMsg',  // 参数传递的形式为  /:参数
      name: 'HelloWorld',    // 传递参数时，一定要指定 name 属性
      component: HelloWorld
    },
    {
      path: '/helloearth/:earthMsg',  
      name: 'HelloEarth',
      component: HelloEarth
    }
  ]
})

那么，当我们点击链接时，就可以开始传递参数：

<template>
    <ul>
        <li>
            <router-link :to="{name: 'HelloWorld', params: {worldMsg: '你好，世界'}}">
                Hello World  // 绑定一个对象，给指定组件传递参数，参数为对象形式
            </router-link>
        </li>
        <li>
            <router-link :to="{name: 'HelloEarth', params: {earthMsg: '你好，地球'}}">
                Hello Earth
            </router-link>
        </li>
    </ul>
</template>

给 HelloWorld 组件传递的参数，得 HelloWorld 来接收；给 HelloEarth 组件传递的参数，得 HelloWorld 来接收。如：

HelloWorld.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{$route.params.worldMsg}}</h2>  // 读取参数使用 $route.params.xxx 形式
  </div>
</template>

HelloEarth.vue：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>{{ $route.params.earthMsg }}</h2>
  </div>
</template>

这样一来，两个组件中就会分别显示不同的内容。

END~~