react.lazy 路由懒加载_【Vue 必知】路由Route安装和使用

点击蓝字关注我们

路由

           在vue中，route,即为前端路由。下面是专业名词解释：

前端渲染和后端渲染

在使用route之前，我们需要知道一些基础知识：

改变url不刷新页面:

使用hash值来进行变化route。

location.hash("路径")

通过html对象修改url：

在该基础上，把urlpush进堆栈。然后使用back方法，弹出栈

上面是用push方法，就是一直压栈和出栈，下面是用replace来进行代替当前站点，就不是栈方法：

使用go来进行前后移动：

或者向前:

vue-route的使用

安装成功后，有在src下有route文件夹：

创建组件

在compoments文件夹下面创建about.vue:

编写App.vue。创建两个标签，点击哪个，显示哪个页面，运行如下:

第一个页面加载[使用重定向方法]:

效果：

使用history模式来避免url地址中出现#，在route目录下的index.js中定义：

route的tag属性

将route-link标签变成button：

效果:

点击route，对应按钮变红色：

效果如下：

或者直接在route下面的index.js写：

使用按钮替换route-link:

也就是说，使用写代码的方法，来变换组件视图,效果如下：

动态路由的使用

      什么是动态路由？假设我几个用户进入的页面参数是不一样的，那么此情况就是动态路由：

App.vue代码：

test.vue代码如下：

目录一览：

从保存的cookie得知，账户为zhangsan,那么url显示张三:

认识路由的懒加载

所谓懒加载，就是用到时再加载、

使用例子：

完整使用：

构建后，结果：

认识嵌套路由

1.创建子组件test2.vue,导出为

2.路由定义

3.在about组件中使用子组件

4.在app.vue中定义路由about

5.运行结果

球分享

球点赞

球在看