在大伙儿做新新项目时毫无疑问会发生发生动态路由

举例子:

一个类型的商品网页页面界面会发生相近不一样的设备就必须在路由器的后面加一个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

动态路由或者十分的简单的;下边就是懒加载学了

懒加载

什么是懒加载?

大伙儿可以看官方网网文字文本文档怎么解释

Vue-Router学习培训第二弹动态路由\懒加载\嵌入路由器插图

 

 

 便是在大家装袋时,所有的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可以不用写‘/’

未完待续。。。