Vue-Router学习第二弹动态路由\懒加载\嵌套路由

摘要

在开发新项目时,我们常常需要使用动态路由。比如,一个产品网页可能会展示多种不同的产品,这时我们就需要在路由后面加上一个id。在Vue中,我们可以使用params来实现这一功能。只需要在Index.js中添加id,然后关联它即可。

正文

在大家做新项目时毫无疑问会出现发生动态路由:

举例说明:

一个种类的产品网页页面会出现类似不一样的产品就需要在路由器的后边加一个id;

Vue的路由器id是那样加上的:

二种动态路由

一种是params主要参数加上:

最先如今Index.js加上id

 {
    path: "/user/:id",
    component: User
  }

随后再关联Id

 <router-link :to="'/user/' dataid" tag="button">客户</router-link>

大家如何动态性获得这一id呢?

this.$route.params.id

也有一种是query主要参数路由器:

 <router-link :to="{path:'/proflie',query:{name:'雷荣',height:1.88,age:18}}" tag="button">我的</router-link>

立即就改为那样,无需配备哪些id

动态路由或是十分的简易的;下面便是懒加载学了

懒加载

什么叫懒加载?

大家能看官方网文本文档怎么解释

 

 

 就是在我们装包时,全部的js都装包在一起,在页面加载的情况下会看起来更为的费劲,因此就想想一个方法能不能在应用某一部件的情况下就载入某一js,别的的不启用,“用时即载入”。

定义了解后,Vue如何完成这一作用呢?

 //立即懒加载
const User = () => import('../components/User.vue')
const Home = () => import('../components/Home.vue')
const About = () => import('../components/About.vue')

便是那么简易;立即将之前引入部件的地区改为那样就可以了

随后便是

嵌入路由器

上编码一看就知:

{
    path: '/home',
    component: Home,

    children: [
      {
        path: '/',
        redirect: 'message'
      },
      {
        path: 'message',
        component: HomeMessage
      },
      {
        path: 'news',
        component: HomeNews
      }

便是在主路由器里加上children,留意:这儿的path能够无需写‘/’

未完待续。。。

 

关注不迷路

扫码下方二维码,关注宇凡盒子公众号,免费获取最新技术内幕!

温馨提示:如果您访问和下载本站资源,表示您已同意只将下载文件用于研究、学习而非其他用途。
文章版权声明 1、本网站名称:宇凡盒子
2、本站文章未经许可,禁止转载!
3、如果文章内容介绍中无特别注明,本网站压缩包解压需要密码统一是:yufanbox.com
4、本站仅供资源信息交流学习,不保证资源的可用及完整性,不提供安装使用及技术服务。点此了解
5、如果您发现本站分享的资源侵犯了您的权益,请及时通知我们,我们会在接到通知后及时处理!提交入口
0

评论0

请先

站点公告

🚀 【宇凡盒子】全网资源库转储中心

👉 注册即送VIP权限👈

👻 全站资源免费下载✅,欢迎注册!

记得 【收藏】+【关注】 谢谢!~~~

立即注册
没有账号?注册  忘记密码?

社交账号快速登录