摘要
在开发新项目时,我们常常需要使用动态路由。比如,一个产品网页可能会展示多种不同的产品,这时我们就需要在路由后面加上一个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能够无需写‘/’
未完待续。。。
关注不迷路
扫码下方二维码,关注宇凡盒子公众号,免费获取最新技术内幕!
温馨提示:如果您访问和下载本站资源,表示您已同意只将下载文件用于研究、学习而非其他用途。
评论0