目录
前言
重定向
alias 别名
redirect 重定向
单页面多路由
前言
- 你应该知道如何创建路由 https://blog.csdn.net/qq_44163269/article/details/105150962
- 你应该知道路由给提供的组件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")
}
}