Vue路由基本介绍

1.路由的基本概念与原理

1.1路由

路由是一个比较广义和抽象的概念，路由的本质就是对应关系。

路由分为：前端路由
          后端路由

1.后端路由

概念：根据不同用户的URL请求，返回不同的内容
本质：URL请求地址与服务器资源之间的对应关系

（2）.SPA

1.后端渲染(存在性能问题)
2.Ajax前端渲染(前端渲染提高性能，但是不支持浏览器的前进后退操作)
3.SPA(Single Page APPlication)单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作
4.SPA实现原理之一：基于URL地址的hash(hash的变化会导致浏览器记录访问历史的变化、但是hash变化不会触发新的URL请求)
5.在实现SPA过程中，最核心的技术点就是前段路由

2.前端路由

概念：根据不同的用户事件，显示不同的页面内容
本质：用户事件与事件处理函数之间的对应关系

用户————→ 前端路由————→事件处理函数 █ █ ▆
  ↑                       |
  |———————————————————————↓
    事件函数渲染响应内容   

2.Vue Router

Vue Router包含的功能有：
支持HTML5历史模式(history)或hash模式
支持嵌套路由
支持路由参数
支持编程式路由
支持命名路由

2.1基本使用步骤(含脚手架使用方法)

脚手架外使用方法：
1.引入相关库文件（vue.js、Vue-Router等相关插件）
<script src="vue_xx.x.xx-js"></script>
<script src="vue-router_xx.x.xx-js"></script>

2.添加路由链接
<!-- router-link是vue中提供的标签，默认会被渲染成a标签 >
<!-- to属性默认会被渲染成herf属性 -->
<!-- to属性的值默认会被渲染成为#开头的hash地址 -->
<router-link to="news">news</router-link>
<router-link to="city">city</router-link>

3.添加路由填充位置
<!-- 路由填充位(也叫路由占位符) -->
<!-- 将来规则而匹配到路由组件，将会被渲染到router-view所在的位置 -->
<router-view></router-view>

4.定义路由组件
const user = {
    template:'<div>user</div>'
}
const news = {
    template:'<div></div>'
}

5.配置路由规则并创建路由实例
//创建路由实例
let router = new VueRouter({
    //routes是路由规则数组
    routes:[
        //每个路由规则都是一个配置对象，其中至少包含path和component两个属性：
        //path表示当前路由规则匹配的hash地址
        //component表示当前路由规则要展示的组件
        { path:'/user',component:User }
        { path:'/news',component:News }
    ]
})

6.把路由挂载到Vue根实例中
new Vue({
    el:'#app',
    //为了能够让路由规则生效，必须把路由对象挂载到vue对象的实例上
    router
})

脚手架使用Vue Rout