vue中 vue-router的路由的2种模式（原生js模拟演示）

hash模式

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><a href="#a">a</a><a href="#b">b</a><a href="#c">c</a><div id="app"></div>
</body>
<script>## 标题// 路由的hash 模式window.onhashchange = function (event) {console.log(event)console.log(location.hash)if(location.hash == '#a') {app.innerHTML = 'a视图'}if(location.hash == '#b') {app.innerHTML = 'b视图'}if(location.hash == '#c') {app.innerHTML = 'c视图'}}// 路由的history模式</script>
</html>

history模式

vue中 vue-router的路由的2种模式（原生js模拟演示）相关推荐

Vue中this.$router.push路由跳转,刷新参数消失
Vue中this.$router.push路由跳转,刷新参数消失 this.$router.push({name:"",params:{id:""}}) nam ...
vue中this.$router.push()路由传值和获取的两种常见方法
我们在做项目时 ,经常会遇到路由跳转页面传值的问题,有的路由跳转到导航页面时导航的样式也就改变了. 命名的路由(通过params) this.$router.push({name: "路径 ...
vue中如何获取当前路由地址
vue获取当前路由地址 1.router和$route的区别 $router: 路由操作对象,只写.需要对路由进行操作时使用.如路由跳转 $route: 路由信息对象,只读.获取路由相关信息时使用.如 ...
vue中的for循环路由二级路由
vue中的for循环路由二级路由 1.第一步先写需要使用的仓库,里面是需要循环的数据name的设置,class的名称,以及要跳转的路径名称 2.第二部分的样式,在正文中进行循环输出.这里需要使用rou ...
vue路由的两种模式：hash与history的区别
前言:众所周知,vue-router有两种模式,hash模式和history模式,下面来看看两者的区别. 一.基本情况直观区别:hash模式url带#号,history模式不带#号. 1.hash模 ...
Vue中 Vue.prototype 详解及使用——作用：避免和已被定义的数据、方法、计算属性产生冲突
Vue中 Vue.prototype 详解及使用--作用:避免和已被定义的数据.方法.计算属性产生冲突 **应用场景:**在很多组件里用到数据/实用工具,但是不想污染全局作用域.这种情况下,可以通过在 ...
Vue中生成二维码的一种方式—vue-qr
Vue中生成二维码的一种方式-vue-qr vue实现二维码生成(vue + vue-qr)
Vue-Router前端路由的两种模式、区别、原理？
vue路由有⼏种模式?有什么区别?原理是什么? 一.vue路由有几种模式? 二.两者区别三.原理一.vue路由有几种模式? vue的路由模式⼀共有两种,分别是哈希和history 二.两者区别哈 ...
[react-router] React-Router的路由有几种模式？
[react-router] React-Router的路由有几种模式? 1.BrowserRouter:浏览器的路由方式,也就是在开发中最常使用的路由方式 2.HashRouter:在路径前加入#号 ...

vue中 vue-router的路由的2种模式（原生js模拟演示）

hash模式

history模式

vue中 vue-router的路由的2种模式（原生js模拟演示）相关推荐

最新文章

热门文章

vue中 vue-router的路由的2种模式 （原生js模拟演示）

hash模式

history模式

vue中 vue-router的路由的2种模式 （原生js模拟演示）相关推荐

最新文章

热门文章

vue中 vue-router的路由的2种模式（原生js模拟演示）

vue中 vue-router的路由的2种模式（原生js模拟演示）相关推荐