Vue-router之集成

在项目中使用 vue-router

项目中新建文件

笔记所在项目

新建 client/config/

新建 client/router.js

新建 client/routes.js

安装 vue-router

npm i vue-router -S

设置路由映射关系

routes.js

import Todo from '../views/toto/todo.vue'
import Login from '../views/login/login.vue'

export default [
  {
    path: '/',  // 默认路由
    redirect: '/app' 
  },
  {
    path: '/app', // todo app
    component: Todo
  },
  {
    path: '/login', // 登录
    component: Login
  }
]

router.js

import Router from 'vue-router'

import routes from './routes'

const router = new Router({
  routes
})

export default router

这样也可以使用，这样 export default router，在全局每个地方 import 的 router 都是同一个 router；如果我们有需要每次 import 时都创建一个 router 就办不到了。

import Router from 'vue-router'

import routes from './routes'

export default () => {
  return new Router({
    routes
  })
}

项目中需要用到服务端渲染，如果文件只 export 一个 router，导致服务端渲染时，出现内存溢出的问题。如果只有 一个 router， 每次服务端渲染都会生成一个新的 app，而 router 只有一个对象，就会缓存每次新建的 app，导致 app 对象在服务端渲染完成之后没有被释放掉，最后内存溢出。

在 index.js 中使用 router

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

import './assets/styles/global.styl'
import createRouter from './config/router' // 引入 router 配置

Vue.use(VueRouter)

const router = createRouter() // 拿到 rouer 对象

const root = document.createElement('div')
document.body.appendChild(root)

new Vue({
  router,  // 注册 router
  render: (h) => h(App)
}).$mount(root)

在 app.vue 中 使用 router-view

通过改变路由，页面显示内容就会变化。

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