Vue 入门 --- 路由

[felix-cao]

vue-router 是 Vue 官方 的路由插件，它和 vue.js 是深度集成的，用于构建单页面应用。

vue 的 Singer Page Application 是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在 vue-router 单页面应用中，则是路径之间的切换，也就是组件的切换。

vue-router 中, 我们看到它定义了两个标签 <router-link> 和 <router-view> 来对应点击和显示部分。<router-link> 就是定义页面中点击的部分，<router-view> 定义显示部分，如同 Angular 中的 ui-view，起到一个占位符的作用。

在 《Vue 入门 --- 安装与构建》#111 基础上，本节讲讲如何实现路由

一、创建 Home 组件和 about 组件

在 /src/components/ 下分别创建 Home.vue 及 About.vue

1.1、Home 组件

Home.vue

<template>
  <div>
    <h1>home</h1>
    <p>{{homeMsg}}</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        homeMsg: "我是 Home 组件"
      }
    }
  }
</script>

1.2、About 组件

About.vue

<template>
  <div>
    <h1>about</h1>
    <p>{{aboutMsg}}</p>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        aboutMsg: '我是 About 组件'
      }
    }
  }
</script>

二、使用 router-link 和 router-view

在 App.vue 中使用 router-link 和 router-view

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <header>
    <!-- router-link 定义点击后导航到哪个路径下 -->
      <router-link to="/home">Home</router-link>
      <router-link to="/about">About</router-link>
    </header>
    <!-- 对应的组件内容渲染到router-view中 -->
    <router-view></router-view>   
  </div>
</template>

<script>
export default {

}
</script>

三、路由配置文件

import Vue from 'vue'
import Router from 'vue-router'
// 导入组件
import Home from '@/components/Home'
import About from '@/components/About'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'Home',
      component: Home
    },
    {
      path: '/about',
      name: 'About',
      component: About
    }
  ]
})

在浏览器中打开，效果如下图