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

文章目录

• • Vue路由-重定向
  • • • • 语法：
  • [Vue路由-404 NotFound](#Vue路由-404 NotFound)
  • • • • 作用：当路径找不到匹配时，给个提示页面
        • 使用步骤：
  • Vue路由-模式设置
  • • • • 语法：

Vue路由-重定向

---

问题：网页打开，URL默认是 / 路径，未匹配到组件时，会出现空白

---

我们可以使用 重定向 解决

什么是 重定向呢：重定向 → 匹配 path后 ，强制跳转 path 路径。

语法：

{path: 匹配路径('/'),redirect:重定向到的路径}

const router = new VueRouter({
  routes: [
      //重定向路径到制定到路径home
    { path: '/', redirect: '/home'},
    { path: '/home', component: Home },
    { path: '/search/:words?', component: Search }
  ]
})

---

Vue路由-404 NotFound

作用：当路径找不到匹配时，给个提示页面

位置：配在路由最后面

• 语法：{ path: "*", component: 'NotFind'}

使用步骤：

1. 先在views目录中创建一个NotFound.vue组件

2. 然后设置好组件中的结构样式内容

     <div>
       <h1>404 NotFound</h1>
     </div>

3. 在router目录下的index.js中，导入我们的NotFound组件

   import NotFound from '@/views/NotFound'

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

   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 (上线需要服务端支持)

---

语法：

const router = new VueRouter({
    routes,
    //给属性加上history值
    mode: "history"
})

---