vue-router配置404页面
解决路径带#问题:http://localhost:8080/#/user/list给路由配置mode: “history”,其他无关请求,都将走向404页面创建404的组件页面:NotFound.vue:<template><div><h1>404,你的页面走丢了</h1></div></template><scrip
·
解决路径带#问题:http://localhost:8080/#/user/list
给路由配置
mode: “history”,
其他无关请求,都将走向404页面
创建404的组件页面:
NotFound.vue:
<template>
<div>
<h1>404,你的页面走丢了</h1>
</div>
</template>
<script>
export default {
name: ""
}
</script>
<style scoped>
</style>
配置路由index.js文件:
只用配置其其他访问都走向该NotFound.vue组件页面就可以了
{
path: ‘*’,
component: NotFound
}
import Vue from 'vue'
import Router from 'vue-router'
import Main from "../views/Main"
import Login from "../views/Login"
import UserList from "../views/user/List";
import UserProfile from "../views/user/Profile";
import NotFound from "../views/NotFound";
Vue.use(Router);
export default new Router({
mode: "history",
routes: [
{
path: '/main/:pass',
//注意component不要写成components了!!!!
component: Main,
props: true,
//嵌套路由
children: [
{
//通过:id来接收参数,还有对象就可以通过:id/:name/:age这样来接收
path: '/user/profile/:id',
name: "UserProfile",
component: UserProfile,
props: true
},
{path: '/user/list', component: UserList}
]
},
{
path: '/login',
component: Login
},
{
//配置重定向
path: '/goHome',
redirect: '/main'
},
{
path: '*',
component: NotFound
}
]
});
更多推荐
已为社区贡献7条内容
所有评论(0)