基础路由的设置——使用vue-router实现导航切换

1.vue-router的安装。

命令行中进入项目所在文件位置【重要】，输入：

npm install vue-router

这里写图片描述

安装完成后在项目文件中的package.json中可以看到vue-router的版本信息。
这里写图片描述

2.在 App.vue中定义<router-link> 和 <router-view>

　　　　在vue-router中, 我们看到它定义了两个标签<router-link> 和<router-view>分别对应点击和显示部分。
　　　　<router-link> 就是定义页面中点击的部分，<router-link> 还有一个非常重要的属性 to，定义点击之后，要到哪里去，如：<router-link to=”/home”>Home</router-link>
　　　　<router-view> 定义显示部分，就是点击后，区配的内容显示在什么地方。
App.vue代码：

<template>
  <div>
    <v-header :seller="seller"></v-header>
    <div class="tab border-1px">
      <div class="tab-item">
        <!-- router-link 定义点击后导航到哪个路径下 -->
        <router-link to="/goods">商品</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/ratings">评论</router-link>
      </div>
      <div class="tab-item">
        <router-link to="/seller">商家</router-link>
      </div>
    </div>
    <!-- 对应的组件内容渲染到router-view中 -->
    <router-view></router-view>
  </div>
</template>

3.创建goods/ratings/seller.vue组件。

<template>
  <div>我是商家</div>
</template>

<script type='text/ecmascript-6'>
export default {
  data () {
    return {
    }
  },
</script>

4.使用router.js 定义router, 就是定义路径到组件的映射。

在一个模块化工程中使用vue-router，必须要通过 Vue.use() 明确地安装路由功能：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

router.js代码为：

import Vue from 'vue'
import VueRouter from 'vue-router'

// 引入组件
import goods from '../components/goods/goods'
import ratings from '../components/ratings/ratings'
import seller from '../components/seller/seller'

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter)

// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
  {
    path: '/goods',
    component: goods
  },
  {
    path: '/ratings',
    component: ratings
  },
  {
    path: '/seller',
    component: seller
  },

  // 重定向，因为首次进入页面时，它的路径是 ‘/’。
  {
    path: '/',
    redirect: '/goods'
  }
]

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes, // (缩写) 相当于 routes: routes
  linkActiveClass: 'active' // 默认值: "router-link-active",全局配置 <router-link> 的默认“激活 class 类名”
})

export default router

5.在main.js中引入路由，注入到根实例中，启动路由。

import Vue from 'vue'
import App from './App'

// 引入路由
import router from './router/router'

// 引入stylus文件
import './common/stylus/index.styl'

// 引入vue-resource
import VueResource from 'vue-resource'

Vue.use(VueResource)

let vm = new Vue({
  router, // 注入到根实例中
  el: '#app',
  render: h => h(App)
})

Vue.use({vm})

6.为选中的导航添加样式类。

通过浏览器控制台，我们可以看到 router-link 标签渲染成了 a 标签，to 属性变成了a 标签的 href 属性，这时就明白了点击跳转的意思。

App.vue中：

<tenplate>
...
</tenplate>
<script>
...
</script>
<style  lang='stylus' rel='stylesheet/stylus'>
@import './common/stylus/mixin.styl'
.tab
  display: flex
  width: 100%
  height: 40px
  line-height: 40px
  border-1px(rgba(7, 17, 27, 0.1))
  .tab-item
    flex: 1
    text-align: center
    & > a
      display: block
      font-size: 14px
      color: rgb(77, 85, 93)
      &.active
        color: rgb(240, 20, 20) // router里面传递了参数linkActiveClass: 'active'
</style>