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.效果

点击上面按钮，下面内容进行切换