三十二、Vue-router入门

男娘i 2022-05-14 16:27 171阅读 0赞

#                                     Vue-router入门 #

由于Vue在开发时对路由支持的不足，后来官方补充了vue-router插件，它在Vue的生态环境中非常重要，在实际开发中只要编写一个页面就会操作vue-router。要学习vue-router就要先知道这里的路由是什么？这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，**vue-router就是我们WebApp的链接路径管理系统**。

有的小伙伴会有疑虑，为什么我们不能像原来一样直接用`<a></a>`标签编写链接哪？因为我们用Vue作的都是单页应用，就相当于只有一个主的index.html页面，所以你写的`<a></a>`标签是不起作用的，你必须使用vue-router来进行管理。

### 1、安装vue-router ###

vue-router是一个插件包，所以我们还是需要用npm来进行安装的。打开命令行工具，**进入你的项目目录，输入下面命令**：

npm install vue-router --save-dev

### 2、router/index.js文件 ###

我们用vue-cli生产了我们的项目结构，你可以在src/router/index.js文件，这个文件就是路由的核心文件，我们先解读一下它。  
      这个文件定义了我们的所有路由。

import Vue from 'vue'   //引入Vue
    import Router from 'vue-router'  //引入vue-router
    import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件
    import Hi from '@/components/Hi'
    
    Vue.use(Router)  //Vue全局使用Router
    
    export default new Router({
      routes: [              //配置路由，这里是个数组
        {                    //每一个链接都是一个对象
          path: '/',         //链接路径：使用这个链接可以跳转到component声明的页面
          name: 'Hello',     //路由名称
          component: Hello   //对应的组件模板：跳转的页面
        },{
          path:'/hi',
          name:'Hi',
          component:Hi
        }
      ]
    })

### 3、路由跳转的页面 ###

**Hi.vue**

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
      </div>
    </template>
    <script>
      export default {
        name: 'hi',
        data () {
          return {
            msg: 'Hi, I am 杨胖子'
          }
        }
      }
    </script>
    <style scoped>
    </style>

### 4、App.vue ###

<template>
      <div id="app">
        <img src="./assets/logo.png">
    
        <p>导航 ：
          <router-link to="/">首页</router-link>     
          
          <router-link to="/Hi">Hi页面</router-link>
        </p>
        <router-view/>     
      </div>
    </template>
    
    <script>
    export default {
      name: 'App'
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>