vue-router的安装和使用

1、安装
npm install vue-router@3
其中3指版本号，vue版本要和vue-router版本配套，否则安装会有错误。
2、准备页面程序
创建2个页面Home和Login
Home.vue

<template>
    <div>
        <h1>Home页面</h1>
        <router-link to="/login">前往Login页面</router-link>
    </div>
</template>

<script>
export default {
    name: 'Home'
}
</script>

Login.vue

<template>
    <div>
        <h1>Login页面</h1>
        <router-link to="/">前往Home页面</router-link>
    </div>
</template>

<script>
export default {
    name: 'Home'
}
</script>

3、创建路由器
index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
// 应用vue-router插件
Vue.use(VueRouter)

// import Home from '../views/Home.vue'
// 配置路由
const routes=[
    {
        path: '/',
        component: () => import('../views/Home.vue')
    },
    {
        path: '/login',
        component: () => import('../views/Login.vue')
    }
]
// 创建路由器
const router = new VueRouter({
    routes
})
// 导出路由器
export default router

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、使用路由器
在App.vue中修改

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</script>