重定向
重定向也是通过 routes
配置来完成,下面例子是从 /home
重定向到 /home1
;
“重定向”的意思是,当用户访问 /home
时,URL 将会被替换成 /home1
,然后匹配路由为 /home1
这时候在url中输入/home会重定向到/home1的组件
404路由一般放到routes[]路由配置项的最下部
routes = [
// 页面路由配置项.....
{
path: '/404',
component: () => import('@/views/404'),
hidden: true
},
// 404 page must be placed at the end !!!
{ path: '*', redirect: '/404', hidden: true }
]
别名
/a
的别名是 /b
,意味着,当用户访问 /b
时,URL 会保持为 /b
,但是路由匹配则为 /a
,就像用户访问 /a
一样
“别名”的功能让你可以自由地将 UI 结构映射到任意的 URL,而不是受限于配置的嵌套路由结构。
编程式的导航:
总结:
1.router,routes,route傻傻分不清?
- 1, router:一般指的就是VueRouter路由实例.如$router.
- 2, routes:指router路由实例的routes API.用来配置多个route路由对象.
- 3, route:指的当前路由对象.例如;$route指的就是当前路由对象.
2.vue-router的两种模式
一般单页面应用是(SPA)不会请求页面而是只更新视图. vue-router提供了两种方式来实现前端路由:Hash模式和History模式,可以用mode参数来决定使用哪一种方式.
2.1Hash模式
vue-router默认使用Hash模式.使用url的hash来模拟一个完整的url.此时url变化时,浏览器是不会重新加载的.
Hash(即#)是url的锚点,代表的是网页中的一个位置,仅仅改变#后面部分,浏览器只会滚动对应的位置,而不会重新加载页面.#仅仅只是对浏览器进行指导,而对服务端是完全没有作用的!它不会被包括在http请求中,故也不会重新加载页面.
同时hash发生变化时,url都会被浏览器记录下来,这样你就可以使用浏览器的后退了.
总而言之:Hash模式就是通过改变#后面的值,实现浏览器渲染指定的组件.
2.2History模式
如果你不喜欢hash这种#样式.可以使用history模式.这种模式利用了HTML5 History新增的pushState()和replaceState()方法. 除了之前的back,forward,go方法,这两个新方法可以应用在浏览器历史记录的增加替换功能上.使用History模式,通过历史记录修改url,但它不会立即向后端发送请求. 注意点:
虽然History模式可以丢掉不美观的#,也可以正常的前进后退,但是刷新f5后,此时浏览器就会访问服务器,在没有后台支持的情况下,此时就会得到一个404!官方文档给出的描述是:"不过这种模式要玩好,还需要后台配置支持.因为我们的应用是单个客户端应用,如果后台没有正确的配置,当用户直接访问时,就会返回404.所以呢,你要在服务端增加一个覆盖所有情况的的候选资源;如果url匹配不到任何静态资源,则应该返回同一个index.html页面."
全面总结知识点:点击打开链接
若有不足请多多指教!希望给您带来帮助!