Vue路由的详解

一、路由的概述

路由，其实就是指向的意思，当我点击页面上的home按钮时，页面中就要显示home的内容，如果点击页面上的about 按钮，页面中就要显示about 的内容。Home按钮 => home 内容， about按钮 => about 内容，也可以说是一种映射. 所以在页面上有两个部分，一个是点击部分，一个是点击之后，显示内容的部分。

路由的三个基本概念

• route: 单个路由
• routes: 多个路由
• router：路由的管理者

：vue-router的切换不同于传统的页面的切换。路由之间的切换，其实就是组件之间的切换，不是真正的页面切换。

二、路由的使用

• 由于Vue在开发时对路由支持的不足，于是官方补充了vue-router插件。

1. 安装vue-router

npm install vue-router --save-dev

2. 创建Vue-cli脚手架项目

• 创建router目录，也就是我们路由配置需要放置的项目
  

3. 创建一个Vue组件

//页面
<template>
  <h1>内容页面</h1>
</template>


<script>
    export default {
        name: "Content"
    }
</script>

<!--scoped 作用域-->
<style scoped>

</style>

4. 在项目当中创建路由配置文件

//引入Vue核心
import Vue from 'vue';
//引入路由插件
import VueRouter from 'vue-router'

//引入路由的组件
import Content from '../components/Content'

//使用vueRouter
Vue.use(VueRouter);

//配置导出路由
export default new VueRouter({
  //routers
  routes:[
    {
    //路径
      path:'/content',
      //跳转到那个组件
      component:Content,
      name:'content'
    }
  ]
})

• 当我们配置完成后，需要在main.js下注册路由
  

5. 使用

• link用来指向路径
• view用来渲染组件