vue-router基础

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

• 1.1后端路由
  概念：根据不同的url请求，响应返回不同的内容
  本质：用户url请求和服务器资源
  
• 1.2 SPA

• 1.3前端路由
  概念：根据不同的用户事件，显示不同的页面内容
  本质：用户事件和事件处理函数之间的对应关系
  

2、vue-router的基本使用

• 2.1基本使用步骤

1.引入相关的库文件

<!-- 导入 vue 文件  为全局window对象挂载vue构造函数-->
    <script src="./lib/vue_2.5.22.js"></script>
    <!-- 导入 vue-router 文件  为全局window对象挂载vue-router 构造函数-->
    <script src="./lib/vue-router_3.0.2.js"></script>

2.添加路由链接

router-link：默认渲染为a标签
  <!--to属性默认被渲染为 href属性  -->
  <!--to属性的值默认被渲染为 # 开头的hash地址  -->
  <router-link to="/user">User</router-link>
  <router-link to="/register">Register</router-link>

3.添加路由填充位

<!-- 路由占位符 -->
<!-- 将来通过路由规则匹配到的组件，都会被渲染到router-view所在的 位置 -->
<router-view></router-view>

4.定义路由组件

  // 创建组件
        const User = {
            template: '<h1>User 组件</h1>'
        }

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

5.配置路由规则并创建路由实例

   // 创建路由实例对象
        const router = new VueRouter({
            // 所有的路由规则 routes路由规则数组
            routes: [{
                // path表示当前路由所匹配的hash地址,与to属性向对应
              //  componenet：当前路由规则对应要展示的组件,只接收路由对象
                path: '/user',
                component: User
            }, {
                path: '/register',
                component: Register
            }]
        })

6.把路由挂载到Vue根实例中

   // 创建 vm 实例对象
        const vm = new Vue({
            // 指定控制的区域
            el: '#app',
            data: {},
            // 挂载路由实例对象
            // router: router
            router
        })