Vue:路由-重定向-404提示-模式设置

Forever_Hopeful2023-09-02 14:07

文章目录

- 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组件
javascript 复制代码
```
import NotFound from '@/views/NotFound'
```

然后再配置路由的规则中进行配置。

javascript 复制代码

const 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"
})