02-vue路由的安装使用

1.安装包

yarn add vue-router -S(线上依赖)

2.创建组件 /views/Home.vue

<template>
  <div class="home">
    this is home page.
  </div>
</template>
<script>
export default {
  data: () => ({})
}
</script>
<style lang="less" scoped>
</style>

3.实例化路由对象并且定义路由规则 /router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'

import Home from '../views/Home.vue'
import About from '../views/About.vue'

Vue.use(VueRouter)

export default new VueRouter({
  routes: [{
    path: '/home',
    component: Home
  }, {
    path: '/about',
    component: About
  }]
})

4.挂载路由 /main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

5.占位,使用

<template>
  <div class="app">
    appvue----{{msg}}
    <router-link to="/home">home</router-link>-----
    <router-link to="/about">about</router-link>
    <router-view></router-view>
  </div>
</template>