解决路径带#问题: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
      }
    ]
});

在这里插入图片描述
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐