大家好今天咱们就来讲讲Vue Router这个炫酷的玩意儿,还会告诉大家History模式下如何做到不用刷新页面也能换路由哦~是不是觉得很神奇?那就让我慢慢给你们揭开这层神秘的面纱!
听说过Vue.js吗?得赶快了解下。这个东西很强大,可以让咱们用JavaScript搞定网页跟APP。尤其是那个Vue-Router的小插件,太好用了,一下子就能解决单页面应用的路由问题。特别温馨提示,它还有两种模式,有个hash模式跟历史模式。今天,咱们就来谈谈这个历史模式。
哈喽!是想了解如何用这个“history”模式么?别慌,超简单的!先把那个讨厌的符号删掉,接着借力浏览器里的“History API”工具,分分钟让你的网页大变样,真心像一个真正的网址!有没有觉得超级好玩?快点行动!
首先咱得弄明白什么叫“历史模式”。说白了,就是你在启动VueRouter的时候添个参数mode=’history’就行,很简单对不对?
//引入Vue和Vue-Router import Vue from 'vue' import Router from 'vue-router' //在Vue中使用Vue-Router插件 Vue.use(Router) //定义路由 const router = new Router({ mode: 'history', routes: [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', component: About } ] }) //创建Vue实例,并将router实例添加到Vue实例中 new Vue({ router, render: h => h(App), }).$mount('#app')
快试试history模式,这个功能可是能让服务器应对各种不同类型的URL请求哟。为啥?其实我们上网的时候,就是在不断地向服务器发出请求!于是服务器就需要做出回应咯,比如发送一个index.html页面啥的。不过别担心,很多服务器工具,像Apache和Nginx这样的,通过设置配置文件就能解决~
看呐,我们现在已经能玩转历史模式和设置服务器了!有人可能疑惑:“网页换新,是不是得刷新整块屏幕呀?”完全没必要担心这个问题!Vue-Router可是会自动记下浏览痕迹哒!不管点啥链接,组件都会立刻变脸儿,根本不用刷新整个页面!就好像偷摸地上网似的,感觉特酷!
RewriteEngine On RewriteBase / RewriteRule ^index.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule . /index.html [L]
和你说哈这个事情。咱网站上现在有两个页面,一个叫Home(主页),还有一个就是About(关于咱们)。比如说,在Home这儿放个“了解更多”的小按钮,你点它一下,马上就能跳到About上去啦;反之亦然,在About那头也得放个“回到首页”的按钮,只要你轻轻点击一下,立马就能蹦回Home咯。关键是在这中间玩儿的时候,网页的所有东西都不用重新加载,就是这么爽快!
Vue-Router的router-link真的超好用,网页瞬间美美的,翻页刷新的感觉也很好。这个功能真的很给力!用history模式后,那些好看的URL就像是真的网址似的,看着都觉得高大上!但是咱们还得弄个服务器处理这些访问请求才行哟~
Welcome to Home Page!
About
好,今儿就先说到这!想了解咋用Vue-Router history模式实现不刷页面就换页的窍门吗?搞不好你能用得上。有啥问题或者想法就在下面留言哈。别忘记给我点赞分享给朋友哈~明儿再贱了哟~
Welcome to About Page!
Home
评论0