Vue Router

Vue Router基础知识官方文档有介绍，请阅读文档

几个重要的知识点

1. 动态路由传参

   // 1.通过params获取值 $route.params.id
   const routes = [
     {
       name: 'detail',
       path: '/detail/:id',
       component: detail
     }
   ]
   

   // 2.使用prop:true的方式
   const routes = [
     {
       name: 'detail',
       path: '/detail/:id',
       component: detail,
       props: true
     }
   ]
   const detail = {
     props: ['id'],
     template: '<div>Detail ID： {{ id }}</div>'
   }
   

2. 嵌套路由

   // index 组件和 details 组件 嵌套 layout 组件
   {
       path: '/',
       component: layout,
       children: [
           {
            name: 'index',
               path: '/',
            component: index
           },
           {
               name: 'details',
               path: '/details/:id',
               component: details
           }
       ]
   }
   

3. 编程式导航

   // 跳转到指定路径
   router.push('/login')
   // 命名的路由
   router.push({ name: 'user', params: { id: '5' } })
   router.replace()
   router.go()
   router.go(-1)
   

Hash 模式和 History 模式

Vue Router 通过 hash 和 History API 两种方式实现前端路由，更新视图但不重新请求页面”是前端路由原理的核心之一

• 表现形式区别

  Hash 模式会带#

  Hash：https://music.163.com/#/playlist?id=3102961863， Histroy：https://music.163.com/playlist/3102961863

• 原理区别

  Hash 模式默认使用hash模式模拟一个完整的 URL，#本身以及后面的字符称为 hash，#符号本来作用是加在 URL 中指示网页中的位置，虽然出现在 URL 中，但不会被包括在 HTTP 请求中。用来指导浏览器动作，对服务端无用，所以改变 hash 不回重新加载页面。

  通过 onhashchange 可以监听路径变化

  History 模式使用History API，HTML5 开始新增了 pushState()和 replaceState()方法使得可对浏览器历史记录栈进行修改

  // stateObject title添加记录的标题 URL添加记录的URL
  window.history.pushState(stateObject, title, URL)
  window.history.replaceState(stateObject, title, URL)
  

  这两个方法有个共同的特点：当调用他们修改浏览器历史记录栈后，虽然当前 URL 改变了，但浏览器不会立即发送请求该 URL。

  需要后台配置支持，在服务端应该除了静态资源外都返回单页应用的 index.html，如果后台没有正确配置，访问时会返回 404。

• 源码分析

  当选择 mode 时，根据不同的类型创建不同的 history 对象

  // 根据mode确定history实际的类并实例化
  switch (mode) {
    case 'history':
      this.history = new HTML5History(this, options.base)
      break
    case 'hash':
      this.history = new HashHistory(this, options.base, this.fallback)
      break
    case 'abstract':
      this.history = new AbstractHistory(this, options.base)
      break
    default:
      if (process.env.NODE_ENV !== 'production') {
        assert(false, `invalid mode: ${mode}`)
      }
  }
  

• History 模式服务端配置

  • tomcat 配置

    在项目目录下添加WEB-INF文件夹，WEB-INF中添加 web.xml

    <!--web.xml-->
    <?xml version="1.0" encoding="UTF-8"?>
    <!--
     Licensed to the Apache Software Foundation (ASF) under one or more
      contributor license agreements.  See the NOTICE file distributed with
      this work for additional information regarding copyright ownership.
      The ASF licenses this file to You under the Apache License, Version 2.0
      (the "License"); you may not use this file except in compliance with
      the License.  You may obtain a copy of the License at
    
          http://www.apache.org/licenses/LICENSE-2.0
    
      Unless required by applicable law or agreed to in writing, software
      distributed under the License is distributed on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
      See the License for the specific language governing permissions and
      limitations under the License.
    -->
    <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee
                          http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
      version="3.1"
      metadata-complete="true">
    
      <display-name>Welcome to Tomcat</display-name>
      <error-page>
            <error-code>404</error-code>
            <location>/index.html</location>
      </error-page>
      <description>
         Welcome to Tomcat
      </description>
    
    </web-app>
    

  • nginx 配置

    修改 nginx 配置文件，conf/nginx.conf

    location / {
        root html;
        index index.html index.htm;
        #新添加内容
        #尝试读取$uri(当前请求的路径)，如果读取不到读取$uri/这个文件夹下的首页
        #如果都获取不到返回根目录中的 index.html
        try_files $uri $uri/ /index.html;
    }
    

  • nodeJs 配置

    const path = require('path')
    // 导入处理 history 模式的模块
    const history = require('connect-history-api-fallback')
    // 导入 express
    const express = require('express')
    
    const app = express()
    // 注册处理 history 模式的中间件
    app.use(history())
    // 处理静态资源的中间件，网站根目录 ../web
    app.use(express.static(path.join(__dirname, '../web')))
    
    // 开启服务器，端口是 3000
    app.listen(3000, () => {
      console.log('服务器开启，端口：3000')
    })