大家好呀，今天我们来浅学一下路由吧，脚手架搭的，vue2

为什么要有动态路由？

有时候一个页面的path可能是不确定的，比如不同的用户，我们希望是

/user/sherry

/user/lily

这个时候我们就需要动态路由

1.动态路由

v-bind绑定router-link里面的路径，这个时候就动态绑定了App里面的userId,点击user information，页面的hash就会跳过去

这个代码是App.vue里面的

  <div id="app">
    <h1>我是APP VUE</h1>
    <router-link to="/home">go home</router-link>
    <router-link to="/about"> go about</router-link>
    <router-link :to="'/user/'+userId"> user information</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      userId: 'sherry'
    }
  }
}
</script>

这个时候如果我们想在User中拿到在App中的userId

我们先看一下index.js中的路由映射

import Vue from 'vue'
import Router from 'vue-router'
import Home from '../components/Home'
import About from '../components/About'
import User from '../components/User'
// 通过Vue.use(插件)，安装插件
Vue.use(Router)

export default new Router({
  // 配置路由和组件之间的关系
  routes: [
    {
      path: '',
      // 重定向
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'HelloWorld',
      component: Home
      // 一个映射关系就是一个对象
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/user/:userId',
      component: User
    }
  ],
  mode: 'history'
})

在这些路由映射关系中,routers是所有的路由映射，而在User中

<template>
  <div>
    <h2>i am user page</h2>
    <p>i am the information of user</p>
    <h2>{{userId}}</h2>
  </div>
</template>

<script>
export default {
  name: 'User',
  computed: {
    userId () {
      // 路由映射中谁处于活跃，this.$route就是谁
      return this.$route.params.userId
    }
  }
}
</script>

<style>
</style>

这个时候我们点击user information,就成功在user这个组件中拿到了App中的userId

 2.路由懒加载

1.vue打包

 我们npm run build打包文件之后，在dist文件夹里面可以看到vue自动帮我们分了包

js文件夹中的app.js里面是当前应用程序开发的所有代码(业务代码)

manifest.js是为了打包的代码做底层支撑的

vendor.js里面是第三方的东西，比如vue/vue-router

2.懒加载

如果代码量过多，在app.js这个文件中会有很多业务代码，这么多页面放在一个js文件中，用户打开页面的时候会出现空白的情况，用户体验非常不好，这个时候可以用懒加载

懒加载：用到时再加载

把不同路由对应的组件分割成不同的代码块，当路由被访问的时候才加载对应组件，这样就很快

我们把刚刚index.js里面的引入方式改成这样

import Vue from 'vue'
import Router from 'vue-router'
// import Home from '../components/Home'
// import About from '../components/About'
// import User from '../components/User'
// 通过Vue.use(插件)，安装插件
const Home = () => import('../components/Home')
const About = () => import('../components/About')
const User = () => import('../components/User')
Vue.use(Router)

export default new Router({
  // 配置路由和组件之间的关系
  routes: [
    {
      path: '',
      // 重定向
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'HelloWorld',
      component: Home
      // 一个映射关系就是一个对象
    },
    {
      path: '/about',
      component: About
    },
    {
      path: '/user/:userId',
      component: User
    }
  ],
  mode: 'history'
})

这个时候我们npm run build打包

 我们刚刚懒加载的包就分出来了，多了三个js文件和三个压过的map，其实就是多了我们刚刚改的那Home ，About， User，一个懒加载对应一个json文件

3.嵌套路由

实现嵌套路由:

        1.创建子组件，在路由映射中配置对应的子路由

        2.在组件内部用<router-view>

1.创建Home子组件HomeMessage & HomeNews

我写反了，news里面的内容填成message的，问题不大，我改一下

2.在index.js里面引入一下+配一下路由

在Home下面懒加载的形式引入

在Home的children下面配，注意：这里是不用加/的，会自动帮我们加

const Home = () => import('../components/Home')
const HomeNews = () => import('../components/HomeNews')
const HomeMessage = () => import('../components/HomeMessage')
const About = () => import('../components/About')
const User = () => import('../components/User')
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '',
      // 重定向
      redirect: '/home'
    },
    {
      path: '/home',
      name: 'HelloWorld',
      component: Home,
      children: [
        {
          path: 'news',
          component: HomeNews
        }, {
          path: 'message',
          component: HomeMessage
        }
      ]
    },

配完路由以后

因为我们这两个东西是在home下面的，所以显示也是在home下面显示，所以我们这个时候的<router-view>是加在Home这个组件里面

我们浅加一下

 浅看一下页面

到页面上了，但是这个时候我们点go about再回来home的时候，默认home里面的news和message都不显示，这样不好，我们去配一下默认路由

 这个时候嵌套路由也有默认路径了

4.参数传递

传参有两种方式params和query，刚刚我们用的是params

params

配置路由:/router/:id

传递方式：在path后面跟上对应的值

传递后路径：/router/123

query

配置路由:/router

传递方式：对象中用query的key作为传递方式

传递后路径：/router?id=123

加一个profile.vue，配好路径之后正常显示，v-bind绑定路径，然后对象里面可以传query

 这个时候我们点一下fo profile

 query会把对象中的所有属性拼接到url上面

如果想在profile中拿query中的对象

 这个时候呢，如果我们把router-link换成按钮，我们只需在click事件上面绑定自定义事件，就可以达到跟router-link一样的效果

   <button @click="userClick">user information</button>
    <button @click="profileClick">go profile</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data () {
    return {
      userId: 'sherry'
    }
  },
  methods: {
    userClick () {
      this.$router.push('/user/' + this.userId)
    },
    profileClick () {
      this.$router.push({
        path: '/profile',
        query: {
          name: 'sherry',
          age: 18
        }
      })
    }
  }
}
</script>

效果图是一样的

 如果有大量的数据要传的时候建议使用quey的方式，因为query是对象，可以传递大量的数据