首先你需要了解路由是什么 -----文章

目录

前言
重定向
alias 别名
redirect 重定向
单页面多路由

前言

1. 你应该知道如何创建路由 https://blog.csdn.net/qq_44163269/article/details/105150962
2. 你应该知道路由给提供的组件router-view 和 router-link是干什么的

• 你在地址里面输入/xxx 展示你路由指定的 组件内容，比如127.0.0.1/my 展示 my 组件内容
• 那如果你在 / 后面输入错误的路由呢？ 比如 /gwgerfswef
• 就找不到匹配的路由了，但是仍然显示页面

• 这时你或许会想：我在那里随便打的，应该找不到页面才对，那为什么会显示页面呢？
• 因为脚手架所驱动的服务是node 服务，在这个 node 服务中他有一个重定向，也就是说它将你所有的请求地址都指向了咱们的 index.html文件

重定向

第一步：您需要创建一个重定向的页面（组件），就是你内容找不到的时候展示的页面

• 就像 404 这种

第二步：新建一个路由

• 在路由的index.js文件写入：

{
	path:"*",   //这个 * 号的意思是当你找不到符合要求的路由时，他会使用该路由所指定的组件
	component:import('../views/Err')  //使用指定的该组件
},

alias 别名

• 默认的，当你地址栏只是输入 127.0.0.1 的时候，它会认为你的地址是 /
• 这时展示的是主页，我现在想通过 /home 来访问它
• 这时你只需要在代码中加入下面的代码即可实现

	alias:"/home",

完整的代码 / 其他的路由都可以这样设置

	{
        path: '/',
        alias:"/home",
        name: 'Home',
        component: Home
    }

重定向 redirect

• 它和别名是有一些相似的
• 当你访问的地址是 xxx 时，会重定向到path为 /yyy 的路由

{
	path:"/abcdefg",// 当你访问的地址是abcdefg时，会重定向到path为/one的路由
	redirect:"/one"
}

与alias进行比较：

• alias是给同一个路由增加了一个入口，地址不会发生变化
• redirect会让地址重新指向到redirect指向的地址

单页面多路由

和视图中的 name 连用

• name与组件名是区分大小写
• name与组件的名字相同。如果没有设置name属性，即要使用名字为default的组件

{
/***********************视图*****************************/
        <router-view name="One"/>
        <router-view name="Two"/>
        <router-view name="Three"/>
        <router-view name="Four"/>
        <router-view/>    //没有提供name，我就使用默认的组件，就是下方中的 default
/***********************路由配置*************************/        
    path:"/main",
    components:{
        One:()=>import("../views/One"),
        Two:()=>import("../views/Two"),
        Three:()=>import("../views/Three"),
        Four:()=>import("../views/Four"),
        default:()=>import("../views/My")
    }
}