路由

SPA 单页面应用

一个项目里 只有一个HTML页面

一旦页面加载完成，SPA不会因为用户的操作而进行页面的重新加载或者跳转

利用JS动态变换HTML内容，模拟多个视图切换

路由

功能

  1. 改变url 不向服务器发送请求
  2. 可以监听url变化
  3. 不刷新 页面的前提下 改变浏览器url地址

hash

  • 原理：在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件
  • 优点：
    • 不需要后端参与
    • 兼容性好IE8
    • hash改变不会向后端发送请求
  • 缺点：
    • hash值前加# 不符合url规范 不美观

history

  • 优点：
    • 符合url规范 美观
  • 缺点：
    • 用户手动输入地址 或 刷新页面 需要配置index页面 防止404
    • 兼容性差IE10 因为利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.
  • 路由变量path
  • 仅修改页面url 不发送请求
    • back()：后退到上一个路由；
    • forward()：前进到下一个路由，如果有的话；
    • go(number)：进入到任意一个路由，正数为前进，负数为后退；
    • pushState(obj, title, url)：前进到指定的 URL，不刷新页面；
    • replaceState(obj, title, url)：用 url 替换当前的路由，不刷新页面；
  • 改变url 会导致浏览器向服务器发送请求，如果匹配不到任何静态资源 应返回同一个html页面
hash history
定义 以前url用的锚点，用于定位页面展示内容 url中#后面的字符串 路由变量pathname
通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件,渲染不同内容，不像服务器发请求，不需要服务器支持 监听url路径变化 需要客户端和服务器支持
原理 获取页面的hash值 相当于直接获取路由变量，实现按需加载子页面 通过history.pushState(state,title,url)改变url内容 但是不刷新页面，比hash美观
是一个真实的url 虚假的url 像在地址栏输入url 但是没有回车 回车会崩溃（服务器刷新404） 解决方法 ：将所有页面的请求重定向到初始页面，在最外层写一个地址解析，相当于获取路由所需要的参数
传数据 传递复杂数据 会有体积的限制 不仅可以放参数，还可以存放在一个特定对象中
兼容性 IE8更好 IE10

参考

思否

知乎

(https://my.oschina.net/u/4357035/blog/3313883)

vue3 路由Demo

  • router/index.js
import {createRouter, createWebHistory} from "vue-router"
// import {createWebHistory,createWebHashHistory} from "vue-router"

// 定义路由组件 和 路由配置
const routes = [
  {
    path:'/',
    component:()=> import('../components/HelloWorld.vue')
  },
  {
    path: '/a',
    component: () => import('../components/a.vue'),
    children: [
      {
        path: '',
        name: 'a1',
        component: () => import( '../components/a1.vue')
      },
      {
        path: 'a2',
        name: 'a2',
        component: () => import('../components/a2.vue')
      }
    ]
  }
]

// 创建路由实例
const router = createRouter({
  // 采用hash 模式
  // history: createWebHashHistory(),
  // 采用 history 模式
  history: createWebHistory(),
  routes, //使用上方定义的路由配置
});

// const router = new Router({ mode: 'history', routes })

// 导出路由
export default router

  • main.js

    import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

// const app = createApp(App)
// app.use(router)
// app.mount('#app')
createApp(App).use(router).mount('#app')

vue2 路由Demo

vue2默认hash

  • router/index.js
import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes =[
    {
        path:'/',
        name:'Aside',
        component: ()=> import( '../components/Aside.vue')
    },
    {
        path:'/Main',
        name:'Main',
        component: ()=> import ('../components/Main.vue'),
        children:[{
            path:'',
            name:'Top',
            component:()=> import('../components/HelloWorld.vue')
        },{
            path:'footer',
            name:'Foot',
            component:()=> import('../components/Foot.vue')
        }]
    }
]
const router = new Router({ routes })
export default router

  • main.js

    import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App),
}).$mount('#app')

results matching ""

    No results matching ""