08-配置vue路由的步骤

1- 安装vue-router

npm i vue-router -S

2-书写路由配置js文件

import Router from 'vue-router';

import Todo from '../views/todo/todo.vue';

import Login from '../views/login/login.vue';

const routes = [
  {
    path: '/',
    redirect: '/app'
  },
  {
    path: '/app',
    component: Todo
  },
  {
    path: '/login',
    component: Login
  }
]

export default () => {
  return new Router({
    routes,
    mode: 'history'
  })
}

3-入口index.js文件中注入

import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './app.vue';

import './assets/styles/global.styl';

import createRouter from './config/router';

Vue.use(VueRouter);
const router = createRouter();

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

4-设置路由出口:<router-view/>

<template>
  <div id="app">
    <div id="cover"></div>
    <Header></Header>
    <router-view/>
    <Footer></Footer>
  </div>
</template>