路由的概念
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
