5.1 路由的概念
1、路由概念:路由就是对应关系
2、SPA与前端路由
(1)SPA指的是一个web网站只有唯一的一个页面,所有的组件的展示与切换都在这唯一的一个页面内完成。此时,不同的组件之间的切换需要通过前端路由来实现
(2)前端路由:Hash地址与组件之间的对应关系(Hash地址就是锚链接#后面的部分,包含#)
5.2 vue-router的基本使用
1、地址:Vue Router
2、安装和配置
(1)安装vue-router包:npm install vue-router@3.5.2 -S
(2)创建路由模块
在src源代码目录下,新建router/index.js路由模块,初始化代码如下:(在vue装插件用Vue.use())
//导入Vue和VueRouter的包 import Vue from 'vue' import VueRouter from 'vue-router' //调用Vue.use()函数,把VueRouter安装为Vue的插件 Vue.use(VueRouter) //创建路由的实例对象 const router = new VueRouter() //向外共享路由的实例对象 export default router
(3)导入并挂载路由模块
-
在main.js中导入并挂载路由模块
-
如果命名不是rou