童年原是一生最美妙的阶段,那时的孩子是一朵花,也是一颗果子,是一片懵懵懂懂的聪明,一种永远不息的活动,一股强烈的欲望。——巴尔扎克
现在位置:首页 > 资源宝库 > 技术教程 > Vue.js 路由

Vue.js 路由

绿色资源网  技术教程  2021-9-29  637  0评论
    <link rel="stylesheet" href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/ck_htmledit_views-1a85854398.css">

路由

  • 1. vue-router 基本使用
    • 安装
    • 使用
    • 说明
    • 路由的默认路径
    • 修改为 history 模式
    • router-link 补充
      • tag
      • replace
      • linkActiveClass
    • 代码路由跳转
    • 动态路由
    • 路由懒加载
      • 懒加载效果
      • 懒加载方式
  • 2. vue-router 嵌套路由
  • 3. 参数传递
  • 4. 导航守卫
  • 5. keep-alive

1. vue-router 基本使用

       vue-router 是 Vue.js 官方的路由插件,适合用户构建单页面应用。

       vue-roter 是基于路由和组件的:

  • 路由用于1访问设定路径,将路径和组件映射起来。
  • 在 vue-roter 的单页面应用中,页面的路径的改变就是组件的切换。

安装

       步骤一:按照 vue-router

       npm install vue-router --save

       步骤二:在模块化工程中使用它(因为是一个插件,所以可以通过Vue.use()来安装路由功能)

  1. 第一步:导入路由对象,并且调用Vue.use(VueRouter)
  2. 第二步:创建路由实例,并且传入路由映射配置
  3. 第三步:在 Vue 实例中挂载创建的路由实例

在这里插入图片描述
在这里插入图片描述

使用

       首先,建立路由和组件之间的映射关系。
在这里插入图片描述

在这里插入图片描述

       通过 router-link控制路由的跳转。
在这里插入图片描述

在这里插入图片描述
       随着路由的跳转,router-view被对应组件替换。
在这里插入图片描述
在这里插入图片描述

说明

       <router-link> 该标签是一个 vue-router 中已经内置的组件,它会被渲染成一个<a>标签。

       <router-view>该标签会根据当前的路径,动态地将路径对应的组件渲染到<router-view>的位置。

       网页的其他内容,比如顶部的标题、导航,或者底部的一些版权信息等会和<router-view>处于同一个等级。在路由切换时,切换的是<router-view>挂载的组件,其他内容不会发生改变。

路由的默认路径

在这里插入图片描述

修改为 history 模式

在这里插入图片描述

router-link 补充

在这里插入图片描述

tag

在这里插入图片描述
在这里插入图片描述

replace

在这里插入图片描述

linkActiveClass

在这里插入图片描述

代码路由跳转

在这里插入图片描述

动态路由

在这里插入图片描述

路由懒加载

在这里插入图片描述

懒加载效果

在这里插入图片描述

懒加载方式

在这里插入图片描述

2. vue-router 嵌套路由

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

      如果我们路由配置如下后,猜猜会发生什么?

在这里插入图片描述

在这里插入图片描述
      可以看到按钮消失了,这是因为B的组件直接替换了basic组件。

      所以,我们可以知道children属性的作用就是如果路由匹配了children中的组件,那么将children中的组件在将在父路由组件中的<router-view>的位置进行替换。

3. 参数传递

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4. 导航守卫

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述

5. keep-alive

在这里插入图片描述

            <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css" rel="stylesheet">
评论一下 分享本文 联系站长
绿色资源网
看完文章就评论一下!
挤眼 亲亲 咆哮 开心 想想 可怜 糗大了 委屈 哈哈 小声点 右哼哼 左哼哼 疑问 坏笑 赚钱啦 悲伤 耍酷 勾引 厉害 握手 耶 嘻嘻 害羞 鼓掌 馋嘴 抓狂 抱抱 围观 威武 给力
提交评论

清空信息
关闭评论