vue项目没有router文件夹_Vue路由(vue-router)配置实战——动态路由，重定向，工程非根目录...

1. 前言

(1) 资料

(2) 需求

本文是在上篇《使用vue-i18n实现多语言》功能的引申。需要实现的功能如下：

多语言需要反映在url上，英文、简体中文、繁体中文页面需分别为/en、/zhCHS、/zhCHT

页面切换后，也能记住上页中选择的语言

在页面中先切换语言再刷新，也显示之前选择的语言

应用的基路径不在根目录下，而是多一级/snycard2018

如果用户load的页面是根目录，要自动定位到正确目录下并以英文作为默认语言

(3) 工程基本情况

[1] vue-router的安装

在Vue init时有选项：[Install vue-router?]。如果选择了yes，会自动安装vue-router。如果没有安装，可以用如下命令进行安装：

npm install vue-router

完成后，工程src目录下有router的文件夹，里面的index.js用来设置路由。

[2] 结构设计

如下图，语言选择的部分，由于所有页面都用，所以在Header.vue中。通过router来切换home页与about页。

2. 实战

(1) 动态路由

在这一小节中解决的问题是：

如何让localhost:8080/en、localhost:8080/zhCHS、localhost:8080/zhCHT都指向Home.vue这个component；而localhost:8080/en/about(其他两种语言略)指向About.vue

如何使用路由进行传参，让页面加载时知道url上面带的是哪种语言

[1] 动态路径参数设置

动态路径参数，以冒号开头。如下router文件夹下的index.js中的配置。根目录下的二级名称就作为lang参数的值。

//index.js

import Vue from 'vue'

import Router from 'vue-router'

import Home from '@/page/home/home'

import About from '@/page/about/about'

Vue.use(Router)

export default new Router({

mode: 'history',

routes: [

{

path: '/:lang', //

component: Home,

},

{

path: '/:lang/about',//

component: About

}

]

})

[2]获取动态路由参数值

以下代码都在App.vue进行修改。

1) DOM中

<