vue-Router(初级篇)

路由的概念

1.什么是路由

路由是根据不同的url2.什么是前端路由

2.什么是前端路由

特点：不向后台发送请求，不刷新页面，前后端分离

3.什么是后端路由

特点：向服务器发送请求，会刷新页面，前后端不能分离

vue-Router前端路由

安装

npm install vue-router

版本控制: 一般比vue要高一个版本,比如vue2版本要下载vue-router3版本

初始化路由

1框架构成

-------------main.js-------------
import Vue from 'vue'   //引入Vue
import Router from 'vue-router'  //引入vue-router
import Hello from '@/components/Hello'  //引入根目录下的Hello.vue组件 
Vue.use(Router)  //Vue全局使用Router
let router= new Router({
  routes: [              //配置路由，这里是个数组
    {                    //每一个链接都是一个对象
      path: '/',         //链接路径
      name: 'Hello',     //路由名称，
      component: Hello   //对应的组件模板
    }
    }
  ]
})
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

上面我已经将路由初始化好了,现在大家可能对上面代码有点不熟,但是也很正常,下面我就一一和大家分析一下

2.结构分析

直接从第一行开始分析

1.导入所需的文件

导入vue: import Vue from 'vue'
导入vue-router import Router from 'vue-router'
导入路由使用到的组件: import Hello from '@/components/Hello'

2.将路由全局注册到Vue

Vue.use(Router)

3.创建路由实例

let router= new Router({

routes: [ //配置路由，这里是个数组

{ //每一个链接都是一个对象

path: '/', //链接路径

name: 'Hello', //路由名称，

component: Hello //对应的组件模板

}

}

]

})

里面的 routes 配置就是用于配置路由信息的,后续路由的配置会详细讲解

4.将路由实例挂载到vue实例上去

new Vue({

render: h => h(App),

router

}).$mount('#app')

保证在任何组件都可以使用到vue-router

初级的路由也就差不多结束了后续给大家带来进阶版的使用