什么是Vue Router
Vue Router 是 Vue.js官方的路由管理器，简单来说就是能够跳转到不同的url显示不同的页面。
基本使用
创建Home.vue和Login.vue组件
//Home.vue
<template>
<div>
<h1>home</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是home 组件"
}
}
}
</script>
//Login.vue
<template>
<div>
<h1>login</h1>
<p>{{msg}}</p>
</div>
</template>
<script>
export default {
data () {
return {
msg: "我是login 组件"
}
}
}
</script>
创建router.js，将不同的组件（components）映射到路由（routes）。
//router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
//引入组件Home和Login
import Home from '../view/Home.vue';
import Login from '../view/Login.vue';
Vue.use(VueRouter);
//定义路由
const routes = [
{path:'/home',commponent:Home},
{path:'/login'，component:Login},
{path: '/',redirect: '/home'}//把路径'/'，重定向到'/home'
]
//创建router实例，传入routes
const router = new VueRouters({
mode:'hash',//默认是hash模式，可改成history和abstract模式
routes
})
export default router
在入口文件main.js中引入路由，注入到根实例中
//main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router.js';
//创建和挂载根实例
new Vue({
router,
render: h => h(App)
}).$mount('#app')
在App.vue中定义<router-link>和<router-view>
//App.vue
<template>
<div class="app">
<header>
// router-link 定义点击导航后到哪个路径下，默认会被渲染成一个<a>标签
<router-link to="/home">Home</router-link>
<router-link to="/login">Login</router-link>
</header>
// 对应的组件内容渲染到router-view中
<router-view></router-view>
</div>
</template>
