第三十六章 Vue之路由重定向/404页面设置/路径模式设置

原创

已于 2024-11-10 10:14:25 修改 · 1.6k 阅读

标签

#前端 #vue.js

于 2024-11-10 10:13:51 首次发布

一、路由重定向

当我们打开网页时， url 默认是 / 路径，这时如果 / 路径未匹配到对应的页面组件时，就会显示空白。如果我们想设定路径未匹配到对应组件时，将请求重定向到一个指定的页面，这时候我们就可以使用到Vue提供给的路由重定向功能。

1.1. 使用方式

说明：重定向 → 匹配path后, 强制跳转path路径

语法： { path: 匹配路径, redirect: 重定向到的路径 }

1.2. 完整代码

1.2.1. main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/index'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

1.2.2. App.vue

<template>
  <div id="app">
    <div class="link">
      <router-link to="/home">首页</router-link>
      <router-link to="/search">搜索页</router-link>
    </div>

    <router-view></router-view>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.link {
  height: 50px;
  line-height: 50px;
  background-color: #495150;
  display: flex;
  margin: -8px -8px 0 -8px;
  margin-bottom: 50px;
}
.link a {
  display: block;
  text-decoration: none;
  background-color: #ad2a26;
  width: 100px;
  text-align: center;
  margin-right: 5px;
  color: #fff;
  border-radius: 5px;
}
</style>

1.2.3. index.js

import Home from '@/views/Home'
import Search from '@/views/Search'
import NotFound from '@/views/NotFound'
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter) // Vue