vue-router 学习快速入门

$ npm install vue-router --save 

import Home from './pages/Home.vue'
import Gifs from './pages/Gifs.vue'
import User from './pages/User.vue'

export const routes = [
  { path: '', ponent: Home },
  { path: '/gifs', ponent: Gifs },
  { path: '/user/:id', ponent: User }
  //指定路由和对应要渲染的组件
  //404的path应该是'*',要放在最末尾，当前面的都匹配不到时才匹配到404页面
  //this.$route.params.id 可以从路由中拿到id数据
]

import VueRouter from 'vue-router'
import { routes } from './routes'

Vue.use(VueRouter)
//路由初始化
const router = new VueRouter({
 routes
})

//将路由注入根组件
new Vue({
 el: '#app',
 ...
 router,
 render: h => h(App)
})

<template>
  <div class="app">
    <router-view></router-view>
  </div>
</template>

watch: {
  '$route'(to,from) {
    //to当前路由，from上一个路由
    this.id = to.params.id
  }
}

const User = resolve => {
  require.ensure(['./ponents/user/User.vue'], () => {
    resolve(require('./ponents/user/User.vue'))
  }, 'GroupName')
}
//webpack 异步加载，通过组名，将要同时一起加载的组件打包加载