Vue路由配置-重定向

2021/6/18 23:29:01

本文主要是介绍Vue路由配置-重定向,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

如果用户访问了一个无效的url(ex:http://localhost:8080/#/filmasdasdasdasd),我们要给这个url进行一个默认的跳转

index.js

import Vue from "vue";
// 从vue-router里面导入VueRouter
import VueRouter from "vue-router";
//导入相关组件
import film from "@/views/film.vue"
import center from "@/views/center.vue"
import cinema from "@/views/cinema.vue"
//注册模块
Vue.use(VueRouter);

const routes = [{
		//路径
		path: "/film",
		//组件
		component: film
	},
	{
		path: "/center",
		component: center
	},
	{
		path: "/cinema",
		component: cinema
	},
	{
		//通配符
		path: "*", 
		//重定向
		redirect: "/film" 
	}
]

const router = new VueRouter({
	routes: routes
})

export default router

效果展示,输入无效url后,回车自动跳转至/film

在这里插入图片描述



这篇关于Vue路由配置-重定向的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!


扫一扫关注最新编程教程