Vue路由的基本概念与原理，Vue-router的使用

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

路由的本质

路由的本质就是对应关系

（1）后端路由

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

（2）SPA

（1）后端渲染（存在性能问题）（表单重复刷新影响体验）
（2）Ajax前端渲染（前端渲染提高性能，但是不支持浏览器的前进后退操作）（无法保存用户在网页上的浏览状态）
（3）SPA单页面应用程序：整个网站只有一个页面，内容的变化通过Ajax局部更新实现，同时支持浏览器地址栏的前进和后退操作
（4）SPA实现原理之一：基于URL地址的hash（hash的变化导致浏览器记录访问历史的变化，但是hash的变化不会触发新的URL请求）
（5）在实现SPA过程中，最核心的技术点就是前端路由

（3）前端路由

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

---

2. 路由的使用

（1）Vue-router的基本使用

基本使用步骤：

• ①引入相关库文件

<script src="./lib/vue-2.4.0.js"></script>
<script src="./lib/vue-router-3.0.1.js"></script>

• ②添加路由链接

  router-link是Vue中提供的标签，默认会被渲染为a标签
  to属性默认会被渲染为href属性
  to属性的值默认会被渲染为#开头的hash地址

<router-link to="/user">User</router-link>

• ③添加路由填充位(路由占位符)

  将来通过路由规则匹配到的组件，将会被渲染到router-view所在的位置

<router-view></router-view>

• ④定义路由组件

const User = {
   
  template:`<h1>User 组件</h1>`
}

• ⑤配置路由规则并创建路由实例

const router = new VueRouter({
   
  //所有的路由规则
  routes:[
    {
    path: '/user', component: User },
    {
    path: '/register', component: Register }
  ]
})

• ⑥把路由挂载到Vue根实例中

  const vm = new Vue({
   
    el: '#app',
    data: {
   },
    //es6中，属性名和属性值的变量一致可以简写
    // router:router
    router
  })

完整示例：

<div id="app">
  <router-link to="/user">User</router-link>
  <router-link to="/register">Register</router-link>
  <router-view></router-view>
</div>

<script>
  const User = {
    
    template:`<h1>User 组件</h1>`
  }

  const Register = {
    
    template:`<h1>Register 组件</h1>`
  }

  const router = new VueRouter({
    
    routes:[
      {
     path: '/user', component: User },
      {
     path: '/register', component: Register }
    ]
  })

  const vm = new Vue({
    
    el: '#app',
    data: {
    },
    router
  })
</script>

点击切换页面---->

---

（2）路由重定向（默认路径）

路由重定向指的是：用户在访问地址a时候，强制用户跳转到地址c，从而展示特定的组件页面；
通过路由规则的redirect属性，指定一个新的路由地址，可以很方便的设置路由的重定向

完整代码：

<div id="app">
  <router-link to="/user">User</router-link>
  <router-link to="/register">Register</router-link>
  <router-view></router-view>
</div>

<script>
  const User = {
    
    template:`<h1>User 组件</h1>`
  }

  const Register = {
    
    template:`<h1>Register 组件</h1>`
  }

  const router = new VueRouter({
    
    routes:[
      //path原路径，redirect新路径
      {
     path