处理路由

2021-09-09 08:03:23 小于 1 分钟

因为我们使用的是vue的服务端渲染，显然对于交互少不了路由，但是我们又不太想使用传统的服务端渲染一样，自己重新对请求url处理，然后响应不同的模板页面，既然使用的是vue，那么肯定想使用vue-router。答案是可以的；

# 安装

# @3.5.2后面会出错  @3.1.x后面不会出错
npm install vue-router -D

1
2

# 使用

新建src/router/index.js和src/views/about.vue、src/views/home.vue文件，内容如下：

// src/router/index.js
import Vue from 'vue';
import VueRouter from 'vue-router';

Vue.use(VueRouter);

//导出工厂函数
export function createRouter() {
    return new VueRouter({
        routes: [
            {
                path: '/',
                compoment: () => import('@/views/home.vue')
            },
            {
                path: 'about',
                compoment: () => import('@/views/about.vue')
            }
        ]
    })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

// src/views/about.vue
<template>
    <h1>about</h1>
</template>

1
2
3
4

上面的代码中和以往不同的是。我导出的不是一个vueRouter实例，而是一个工厂函数，之所以这样处理是因为在将来访问我们的网站的用户会又很多个，而不同的用户所访问的页面和内容都不相同，所以需要每次都返回一份最新的router给前台，从而避免污染；

处理路由

# 安装

# 使用

详情