Vue项目里如何使用路由(一)
1.路由作用:
在我看来路由就是用来切换场景的,类似于tab栏切换的效果。但是它在一个页面里切换业务场景时整体页面不刷新页面,用户体验更好 数据传递容易, 开发效率高。
2.创建路由
2.1首写要清楚在vue中创建路由会出现以下两个文件夹
views文件是创建你切换页面要显示的组件
2.2路由创建有2种方式
安装路由依赖包---vue-router
1.1---创建vue项目时,直接选择vue-router安装路由
1.2---npm安装----npm install vue-router
要想知道自己是否安装成功可以打开package.json文件是否出现以下圈出内容
第一种是系统自动帮你配置好了,第二种是全程需要自己手动配置
以下创建路由的步骤是针对第二种手动
2.3导入路由依赖包
import { createRouter, createWebHashHistory } from 'vue-router'
在以下文件中导入
2.4配置路由(核心)----路由配置文件(也是在以上的文件中配置)
配置规则
路由对象实例化
导出路由配置文件
const routes = [
{
path: '路由路径',
name: '路由名称',
component: 路径对象对应的组件对象
}
]
2.5配置路由地址与组件的映射关系
导入页面组件,即你在views文件夹中创建的组件
此段代码写在上一步配置规则前面
2.6导入路由配置文件和挂载路由对象
在main.js中精选导入和挂载
以上路由已经配置完成了
3.使用路由
3.1将根组件里面的a标签改为router-link,href属性改为to属性
3.2在想要实现页面组件的地方 写上router-view标签
4.效果
点击上面按钮,下面内容进行切换