重定向
拜访 /, 重定向到 /about
- redirect 返回对象
- 办法
别名
- 多个别名
-
index.js
// 1. 定义路由组件. // 也能够从其余文件导入 import Home from "../views/Home.vue"; import About from "../views/About.vue"; import User from "../views/User.vue"; import NotFound from "../views/NotFound.vue"; import News from "../views/News.vue"; import Parent from "../views/Parent.vue"; import Styleone from "../views/Styleone.vue"; import Styletwo from "../views/Styletwo.vue"; import Page from "../views/Page.vue"; import ShopTop from "../views/ShopTop.vue"; import ShopMain from "../views/ShopMain.vue"; import ShopFooter from "../views/ShopFooter.vue"; import {createRouter, createWebHashHistory} from "vue-router"; // 2. 定义一些路由 // 每个路由都须要映射到一个组件。// 咱们前面再探讨嵌套路由。const routes = [ { path: '/', // redirect: {name:"about"} //redirect: '/about' redirect:(to)=>{console.log(to); return {path:"/about"} } }, { path: '/about', name: 'about', component: About }, {path: '/user/:id', component: User}, { name: "news", //path: '/news/:id(\\d+)',// 正则匹配 // path: '/news/:id+',// 多个参数 //path: '/news/:id+',// 参数可有可无 //path: '/news/:id*',// 参数可反复叠加 path: '/news/:id?',// 参数不可反复叠加 component: News }, {path: '/:path(.*)', component: NotFound },// 应用正则,匹配任意 path { path: "/parent", // alias: '/father', // 起一个别名 alias: ['/father', '/laofuqin'], // 起多个别名 component: Parent, children: [ { path: "styleone", component: Styleone }, { path: "styletwo", component: Styletwo } ] }, { path: "/page", component: Page }, { path: "/shop", components: { default: ShopMain, ShopTop:ShopTop, ShopFooter:ShopFooter, ShopMain:ShopMain } } ] // 3. 创立路由实例并传递 `routes` 配置 // 你能够在这里输出更多的配置,但咱们在这里 // 临时放弃简略 const router = createRouter({ // 4. 外部提供了 history 模式的实现。为了简略起见,咱们在这里应用 hash 模式。history: createWebHashHistory(), routes, // `routes: routes` 的缩写 }) export default router