文章目录
-
- Vue路由-重定向
- [Vue路由-404 NotFound](#Vue路由-404 NotFound)
- Vue路由-模式设置
Vue路由-重定向
问题:网页打开,URL默认是 / 路径,未匹配到组件时,会出现空白
我们可以使用 重定向 解决
什么是 重定向呢:重定向 → 匹配 path后 ,强制跳转 path 路径。
语法:
{path: 匹配路径('/'),redirect:重定向到的路径}
javascript
const router = new VueRouter({
routes: [
//重定向路径到制定到路径home
{ path: '/', redirect: '/home'},
{ path: '/home', component: Home },
{ path: '/search/:words?', component: Search }
]
})
Vue路由-404 NotFound
作用:当路径找不到匹配时,给个提示页面
位置:配在路由最后面
- 语法:
{ path: "*", component: 'NotFind'}
使用步骤:
-
先在views目录中创建一个NotFound.vue组件
-
然后设置好组件中的结构样式内容
javascript<div> <h1>404 NotFound</h1> </div>
-
在router目录下的index.js中,导入我们的NotFound组件
javascriptimport NotFound from '@/views/NotFound'
-
然后再配置路由的规则中进行配置。
javascriptconst router = new VueRouter({ routes: [ { path: '/', redirect: '/home'}, { path: '/home', component: Home }, { path: '/search/:words?', component: Search }, //配置404 { path: '*' , component: NotFound } ] })
Vue路由-模式设置
路由的路径看起来不自然,有 # 号,我们有什么方法将其改为 / 呢?
-
hash路由(默认的), 例如
http://localhost:8080/#/home
-
history路由(常用) 例如
http://localhost:8080/home
(上线需要服务端支持)
语法:
javascript
const router = new VueRouter({
routes,
//给属性加上history值
mode: "history"
})