[JavaScript知识库]spa和ssr应用中vue-router引入的区别

一、传统的spa vue应用

1. 安装vue-router

npm install vue-router

2. 编写router-rules传入VueRouter构造函数创建router实例, 并全局注册vue-router

import Vue from 'vue'
import Router from 'vue-router'

// 1. 引入页面组件
import Foo from '../pages/foo.vue'
import Bar from '../pages/bar.vue'



// 2. 定义路由
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
// 我们晚点再讨论嵌套路由。
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

Vue.use(Router)

// 3. 创建 router 实例，然后传 `routes` 配置
// 你还可以传别的配置参数, 不过先这么简单着吧。
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

3. 在app.vue中使用router-link和router-view组件

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

4. 将router实例传入createVueApp逻辑中的Vue构造函数，创建vue应用实例

const app = new Vue({
  router
}).$mount('#app')

二、ssr vue应用

在ssr应用中引入vue-rouer，需要两个额外的两个事情。

• 避免全局污染，需要使用工厂模式创建vue-router。因为ssr应用中，所有用户的请求都是由一个server服务器处理的，不能共用一个vue-router实例，这样会造成混乱。
• 需要
  所以ssr中引入vue-router就变成了这样

1. 安装vue-router

npm install vue-router

2. 编写一个根据router-rules创建router实例的工厂函数

// router/createRouter.js

import Vue from 'vue'
import Router from 'vue-router'

import Index from '../pages/index.vue'
import Detail from '../pages/detail.vue'

Vue.use(Router)

// 这里为什么不导出一个router实例哪？
// 每次用户请求都需要创建router实例
export default function createRouter() {
    return new Router({
        mode: 'history',
        routes: [
            {path: '/', component: Index},
            {path: '/detail', component: Detail},
        ]
    })
}

3. 在app.vue中使用router-link和router-view组件

<div id="app">
  <h1>Hello App!</h1>
  <p>
    <!-- 使用 router-link 组件来导航. -->
    <!-- 通过传入 `to` 属性指定链接. -->
    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>
  </p>
  <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->
  <router-view></router-view>
</div>

4. 在createVueApp工厂函数，创建vue实例时加入router

// createVueApp.js

// 创建vue实例
import Vue from "vue";
import App from "./App.vue";
import createRouter from "../router/createRouter.js";

export default function createApp() {
  const router = createRouter();
  const app = new Vue({
    router,
    render: h => h(App),
  });
  return { app, router };

5. 在entry-server.js中根据请求url返回创建vue实例，当router ready的时候返回。

// entry-server.js

import createApp from "./app";

// context哪来的？
export default context => {
  return new Promise((resolve, reject) => {
  
    // 渲染vue实例
    const { app, router } = createApp();
    
    // 进入对应页面
    router.push(context.url)
    
    // 对应页面渲染完成返回
    router.onReady(() => {
        resolve(app);
    }, reject)
  });
};