我和Vue
Round1:Vue和VueRouter
首先吹吹Vue:
Vue是一台用于构建用户界面的渐进式框架,可以自底向上逐层应用,有易于上手、便于与第三方库和已有项目整合等优点。
再讲讲Vuerouter是什么
Vue Router是Vue.js.官方的路由管理器,包含路由配置、视图过度效果、导航控制、自定义滚动条等功能。有时候,同一个路径可以匹配多个路由,此时,匹配的优先级就按照路由的定义顺序:谁先定义的,谁的优先级就最高。
啊,Vue Router的两种模式
Vue Router默认hash模式。在hash模式下,URL中会多一个#
,不太美观。并且hash模式只能设置同文档的URL只能修改#
之后的部分,允许添加短字符串。当修改值和之前的值不一样才会添加到栈中。
Vue还有另一种history模式。history利用了HTML5 History Interface中新增的push state()
和replace state()
方法。在这个模式下,可以设置任意同源的URL、可添加任何数据类到记录中、可设置title属性。唯一需要说明的是:history模式下URL确实好看,但是需要后台配置支持,如果后台没有
正确的配置,当用户访问网页时会返回404。所以呢,你要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源,则应该返回同一个 index.html
页面,这个页面就是你 app 依赖的页面。
后端配置案例:
Apache:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
</IfModule>
node.js:
const http = require('http')
const fs = require('fs')
const httpPort = 80
http.createServer((req, res) => {
fs.readFile('index.htm', 'utf-8', (err, content) => {
if (err) {
console.log('We cannot open "index.htm" file.')
}
res.writeHead(200, {
'Content-Type': 'text/html; charset=utf-8'
})
res.end(content)
})
}).listen(httpPort, () => {
console.log('Server listening on: http://localhost:%s', httpPort)
})