Vue3 route jump

Vue 3 uses Vue Router to manage routing for your application. Vue Router is a routing management plug-in officially provided by Vue.js, which is used to implement routing navigation in single page applications (SPA).

Here are the basic steps on how to use Vue Router for routing jumps in Vue 3:

1. router-link (declarative)

•  The parameters passed by params will not be displayed in the redirected URL, but the parameters passed by query will be displayed in the URL. Because the parameters passed by params are not displayed in the URL, it is recommended to pass parameters in the params method when routing.

<router-link :to="{ name: 'detail', params: { id: '123', value: '跳转到详情'} }"></router-link>
<router-link :to="{ name: 'detail', query: { id: '123', value: '跳转到详情' } }"></router-link>
</router-link>
<router-link :to="{ path: '/detail', query: {id: '123', value: '跳转到详情' } }"></router-link>

• Get the parameters passed by params and query

  import { useRoute } from 'vue-router';
  const route = useRoute();
  console.log(route.params）
  console.log(route.query）

  2. Router (programming)

• Instructions

import { useRouter } from 'vue-router';
const router = useRouter();
router.push({ path: '/home',query: { id: '123', value: '跳转到详情'} })
router.push({name: '/home', params: { id: '123', value: '跳转到详情'} })
router.push({name: '/home',query: { id: '123', value: '跳转到详情'} })

• Get parameters

import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params）
console.log(route.query）

• Other commonly used vue-router methods

• push(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): Navigates to a new route, similar to clicking <router-link> Make a jump. You can use a string path or an object describing the address as a parameter.

• replace(location: RawLocation, onComplete?: Function, onAbort?: ErrorHandler): Similar to the push method, but not in the browser leaves the record in the history, but replaces the current history entry.

• go(n: number): Go forward or back n steps in the browser history, similar to the browser's forward and back buttons.

• back()： Backward step, etc. go(-1).

• forward(): Forward one page, equivalent to go(1).

• getCurrentLocation(): Get the address information object of the current route.

• beforeEach(guard: NavigationGuard): Register a global pre-guard, which is used to execute logic before navigation starts and can be used for routing permission control and other operations.

• beforeResolve(guard: NavigationGuard): Register a global guard, which will be executed before the navigation is confirmed, but called after the beforeEach guard.

• afterEach(hook: (to: Route, from: Route) => any): Register a global post hook to be executed after the navigation is completed, regardless of success or failure .

• resolve(location: RawLocation, current?: Route, append?: boolean): Parse the incoming location information into a complete location object.

• addRoute(parentName: string, route: RouteRecordRaw): Dynamically add a new routing record.

• removeRoute(name: string): Dynamically remove a registered routing record.

• hasRoute(name: string): Check whether a routing record has been registered.

• getRoutes(): Get the currently registered routing configuration.

3. Router.resolve() opens a new window and jumps

import { useRouter } from 'vue-router';
const router = useRouter();
const goDeatil=()=> {
    let temp = router.resolve({
      path: '/detail',
    });
    window.open(temp.href, '_blank');
  }
const goDeatil=()=> {
    let temp = router.resolve({
     name: 'detail',
    });
    window.open(temp.href, '_blank');
  }