3.路由vue-router

• 设置路由 两种写法

       {
            path: '/coursePay/:id',
            name: '付款页',
            component: resolve => require(['@/components/coursePay.vue'], resolve)
        },
  //es6
        {
            path: '/play',
            name: '播放页',
            component: () => import('@/components/play.vue')
        },

• 路由跳转

<button @click="goPlay(item)">跳转</button>
<script>
        methods: {
            goPlay(e) {
                console.log(e)
                //命名路由跳转
                this.$router.push({name:"播放页"})
               //path路由跳转
                router.push({ path: 'play' })
              //命名路由传参
              this.$router.push({ name: '播放页', params: { userId: '123' }})
            },
        }
</script>

嵌套路由

export default new Router({
  routes: [
    {
      path: '/home',
      name: '首页',
      component: Home,
      iconCls: 'el-icon-message',
    },
    {
      path:'/',
      name:'导航。',
      component:Nav,
      children:[
        {
          path:'/scroll',
          name:'滑块',
          component:scrollcontainer,
        },
        {
          path:'/md',
          name:'md',
          component:Md,
        },
        {
          path:'/water',
          name:'water',
          component:Water,
        }
      ]
    }
  ]
})