vue中vue-router的使用方法

路由中有三个基本的概念 route, routes, router。

　1， route，它是一条路由，由这个英文单词也可以看出来，它是单数， Home按钮 => home内容，这是一条route, about按钮 => about 内容，这是另一条路由。

　2， routes 是一组路由，把上面的每一条路由组合起来，形成一个数组。[{home 按钮 =>home内容 }， { about按钮 => about 内容}]

　3， router 是一个机制，相当于一个管理者，它来管理路由。因为routes 只是定义了一组路由，它放在哪里是静止的，当真正来了请求，怎么办？就是当用户点击home 按钮的时候，怎么办？这时router 就起作用了，它到routes 中去查找，去找到对应的 home 内容，所以页面中就显示了 home 内容。

在路由切换时，切换的是<router-view>挂载的组件，其他内容不会发生改变

效果图：

1. 使用vue-router需要先安装

npm install vue-router --save
或：
cnpm install vue-router --save

2. 项目目录如下：

3. App.vue代码

<template>
  <div id="app">
    <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>

2. main.js代码

import Vue from 'vue'
import App from './App'
// 导入 router 对象
import router from "./index";


Vue.config.productionTip = false

new Vue({
  el: '#app',
  // 将router对象传入到vue实例
  router,
  components: { App },
  template: '<App/>'
})

3. index.js代码

// 配置路由相关信息
import Vue from "vue";
import VueRouter from "vue-router";
// 引入组件
import home from "./home.vue";
import about from "./about.vue";

// 要告诉 vue 使用 vueRouter
Vue.use(VueRouter);
// 路由的配置(访问的路径和显示的对应的组件)
const routes = [
  {
    path: "/home",
    component: home
  },
  {
    path: "/about",
    component: about
  },
  {
    path: "/",
    component: home
  },
]
// 创建VueRouter对象并导出
var router = new VueRouter({
  routes
})
export default router;

4. about.vue组件中的代码

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

5. home.vue组件中的代码

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

6. 此时如果我们想访问跟路由/时就显示home组件，index.js中的代码新增两行即可

// 路由的配置(访问的路径和显示的对应的组件)
const routes = [
  {
    path: "/home",
    component: home
  },
  {
    path: "/about",
    component: about
  },
  {
    path: "/",  // 新增行
    component: home  // 新增行
  },
]

7. 此时如果我们想点击的按钮一个状态，未点击的按钮另外一个状态

因为我们点击的按钮，router会自动帮我们在该按钮上加一个class属性 router-link-active，所以我们只要定义好该属性的样式即可，同时我们又想为其它未点击的按钮也也设置一个相同的样式，只需要在所有按钮上都加上一个样式属性就行，切记router-link-active一定要放在所有按钮加样式属性的下面

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

<script>
  export default {

  }
</script>

<style>
  .red{
    color: red;
  }
  .router-link-active{
    color: gold;
  }
</style>

8. 导入每个组件中用到的js文件

如果我们的一个组件中用到了很多的js导入包，那么我们直接在main.js中导入那个js文件即可：