Vue2|浅学一下路由吧(动态路由+懒加载+嵌套+参数传递）1

大家好呀，今天我们来浅学一下路由吧，脚手架搭的，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',