Vue Router的使用

什么是Vue Router

Vue Router 是 Vue.js官方的路由管理器，简单来说就是能够跳转到不同的url显示不同的页面。

基本使用

创建Home.vue和Login.vue组件

//Home.vue

//Login.vue

创建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中定义和

//App.vue