乐趣区

关于vue-router:P31-vuerouter-重定向和别名

重定向

拜访 /, 重定向到 /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
    
    
退出移动版