Use vue-router. In particular, what I record here is the compilation of vue-router file. And use it on the page.

My site is divided into three main parts:

1: route to the PC page 2: route to the mobile page 3: route to the back-end management system

Therefore, I will use routing nesting (child routing) here.

Please refer to the official document for specific usage:

router.vuejs.org/

I’m going to put the contents of the file I’m currently using here. The base language I use is typescript:

Index.ts

// Import the vue-Router object
import { createRouter, createWebHistory, ErrorHandler } from "vue-router";
/** * Define route array */
const routes = [
  {/ / 404 routing
    path: '/ 404'.name: '404'.component: () = >import('/@/views/404.vue')}, {// The backend manages the system routing group
    path: "/admin".redirect: "/admin/home".name: "admin".component: () = > import("/@/views/admin.vue"),
    children: [{path: "home".name: "home".meta: { 
              requireAuth: true // Add this field to indicate that logging in to the route is required
            },
            component: () = > import("/@/views/admin/Home.vue")}, {path: "setting".name: "setting".meta: { 
              requireAuth: true // Add this field to indicate that logging in to the route is required
            },
            component: () = > import("/@/views/admin/Setting.vue")},]}, {// The main site of the blog PC page routing
    path: "/pc".redirect: "/pc/index".name: "pc".component: () = > import("/@/views/pc.vue"),
    children: [{path: "index".name: "Home page".component: () = > import("/@/views/pc/Home.vue"),},]}, {// The main blog site mobile page routing
    path: "/phone".redirect: "/phone/pindex".name: "phone".component: () = > import("/@/views/phone.vue"),
    children: [{path: "pindex".name: "Home".component: () = > import("/@/views/phone/Home.vue")},]},];/** * Create route */
const router = createRouter({
  // Hash mode: createWebHashHistory,
  // History mode: createWebHistory
  history: createWebHistory("/"),
  // history:createWebHashHistory(),
  routes,
});
 
/** * Route guard */
router.beforeEach((guard) = > {
  beforeEach.checkAuth(guard, router);
});
 
/** * Route error callback */
router.onError((handler: ErrorHandler) = > {
  console.log("error:", handler);
});
 
/** * Output object */
export default router;
Copy the code

Of course, the current file can only handle the most basic hops, and has added a 404 page jump at the beginning of the route. The above basic comments, reference is good.

Use in pages:

In Vue3, you can mount a Router to a Vue object just as in VUE2.

However, this is not officially recommended, so vue-Router is introduced on a per-page basis.

It looks something like this:

import { useRouter, useRoute } from "vue-router";
export default {
    name: "article, components: {}, / / VUE3 grammar first execution of hook function / / setup the official document parameter setup (props: / / https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html# Any, content: any) {var router = useRouter(); Var route = useRoute(); /** * @name: declare data * @author: camellia * @email: [email protected] * @date: 2021-01-18 */ const data = reactive({// articleid article_id: route.query. Article_id? Route.query. Article_id: 0,}); /** * @name: subcategory * @author: camellia * @email: [email protected] * @date: 2021-01-15 */ const cateSonShow = (cate_id_son:number) =>{ data.cate_id_son = cate_id_son; Router-. push({path: '/ PC /articleList', // route query query: {cate_id_son: data.cate_id_son}}); }}Copy the code

For more information about functions of Vue-Router4, see the official documentation:

Next.router.vuejs.org/installatio…

Specific code implementation, please refer to my code vue3 code base: gitee.com/camelliass/…

For good suggestions, please enter your comments below.

Welcome to guanchao.site

Welcome to applet: