vue-router详解-基础使用（1）

路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。再通俗的说，vue-router就是我们WebApp的链接路径管理系统。

vue项目中无法直接用<a></a>标签编写链接，因为用Vue做的都是单页应用，就相当于只有一个主的index.html页面，所以你写的<a></a>标签是不起作用的，必须使用vue-router来进行管理。

通过vue-cli脚手架创建vue项目之后，创建的时候可以选择安装vue-router插件

也可以通过以下命令安装vue-cli插件：

npm install vue-router --save-dev

安装之后router/index.js文件对应vue路由管理文件：

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'


Vue.use(Router)   //Vue全局使用Router

export default new Router({
  // 路由模式设置：（history模式（不带#）和hash模式：（带#））
  mode:'history',
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components:HelloWorld,
    }
]

可以看到代码中routers是一个数组对象，其中path是路由对应的连接路径，name对应路由名称，component对应组件模板

清楚路由基本配置之后，可以简单增加一个Hi页面路由，分为两步

（1）Hi.vue页面

<template>
<div>
    <h2>{{msg}}</h2>
</div>
</template>

<script>

export default{
    data() {
        return {
            msg:'I am Hi component'
        }
    }
}
</script>

（2）router/index.js页面引入Hi组件

import Hi from '@/components/Hi'

（3）增加路由配置

 routes: [
    {
      path: '/',
      name: 'HelloWorld',
      components:HelloWorld,
    },
    {
      path: '/hi',
      name: 'Hi',
      components:Hi,
    }
]

router-link制作导航

路由文件配置好之后，可以通过在地址栏改变字符串地址，实现页面内容的变化了。这并不满足需求，我们需要的是在页面上有个导航链接，我们只要点击就可以实现页面内容的变化。制作链接需要<router-link>标签，它的语法如下。

 <router-link to="/">首页</router-link> |
 <router-link to="/hi">Hi页面</router-link> |

• to：是我们的导航路径，要填写的是你在router/index.js文件里配置的path值，如果要导航到默认首页，只需要写成 to=”/” ，
• [显示字段] ：就是我们要显示给用户的导航名称，比如首页 新闻页。

 以上即为vue-router的一个简单用法