Router

创建路由

内置路由渲染、跳转组件，跳转函数、路由守卫。支持 SSR

渲染配置路由信息

请不要在 SSR 下使用 hash 模式，因为浏览器会自动过滤掉 hash 路由。

import { createRouter, Router, Route } from 'pl-vue/lib/router';
import Home from './pages/home';

// 初始化路由信息
createRouter({
  base: '',                      // 路由前缀
  mode: 'history',               // 路由模式 'history' | 'hash'
  ssrDataKey: 'g_initialProps',  // 服务端渲染挂载在 window 上的 key
})

function App() {
  return <Router>
    <Route path='/' component={Home} />
    <Route path='/docs' component={() => import('./pages/about')} />  {/* 按需导入，页面加载时加载文件 */}
  </Router>
}

嵌套路由

// app.tsx
import { Router, Route } from 'pl-vue/lib/router';
import About from './pages/about';
import Home from './pages/home';

function App() {
  return <Router>
    <Route path='/docs' component={About} />
    <Route path='/' component={Home} exact={false} />
  </Router>
}

// page/home.tsx
import { Router, Route, PagePropsType, Link } from 'pl-vue/lib/router';

function Home(props: PagePropsType) {
  return <div>
    <nav>
      <Link to='/sub1'>sub1</Link>
      <Link to='/sub2'>sub2</Link>
    </nav>
    <Router prefix={props.path}>
      <Route path='/sub1' component={Sub1} />
      <Route path='/sub2' component={Sub2} />
    </Router>
  </div>
}

export default Home;

页面渲染前执行函数

主要用于服务端渲染，获取到页面加载前的数据

import { PagePropsType, GetInitialPropsOption } from 'pl-vue/lib/router';

function Home(props: PagePropsType) {
  console.log(props.data);  //--> hello
  return <div>{props.data}</div>
}

Home.prototype.getInitialProps = async (option: GetInitialPropsOption) => {
  // await 异步任务
  return 'hello';
}

useRoute

获取当前路由信息

import { useRoute } from 'pl-vue/lib/router';

function App() {
  const route = useRoute();
  console.log(route);

  return <div>hello</div>
}

useRouter

import { useRouter } from 'pl-vue/lib/router';

function App() {
  const router = useRouter();

  return <div>
    <botton onclick={() => router.push('/path?id=123')}>jump</button>
    <botton onclick={() => {
      router.push({ path: '/path', query: { id: 123 }, hash: '' });
    }}>jump</button>
  </div>
}

路由守卫

import { createRouter, Router, Route, useRouter } from 'pl-vue/lib/router';

// 全局守卫
createRouter({}).beforeEach((to, from, next) => {
  console.log(to, from);
  next();
});

function App() {

  const router = useRouter();

  return <Router>
    {/* 独享守卫 */}
    <Route path='/' component={Home} beforeEnter={(to, from, next) => {
      router.relace('/aaa');
      next();
    }} />
    <Route path='/docs' component={About} />
  </Router>
}