VUE3(五)vue路由vue-router4

作者:神秘网友 发布时间:2021-02-22 08:50:29

VUE3(五)vue路由vue-router4

使用vue-router,这里特别说明一下,我这里记录的是vue-router文件的编写。及在页面中的使用。

我的站点主要分为三个部分:

1:pc端页面的路由
2:手机端页面的路由
3:后端管理系统的路由

因此,我这里会使用到路由嵌套(子路由)。

具体的用法请参照官方文档:

https://router.vuejs.org/

我这里放一下我当前使用文件得我内容。我使用的基础语言是typescript:

Index.ts

// 引入vue-router对象
import { createRouter, createWebHistory, ErrorHandler } from "vue-router";
/**
 * 定义路由数组
 */
const routes = [
  {// 404路由
    path: '/404',
    name: '404',
    component: ()=import('/@/views/404.vue')
  },
  {// 后端管理系统路由组
    path: "/admin",
    redirect: "/admin/home",
    name: "admin",
    component: () = import("/@/views/admin.vue"),
    children: [
        {
            path: "home",
            name: "home",
            meta: { 
              requireAuth: true // 添加该字段,表示进入这个路由是需要登录的
            },
            component: () = import("/@/views/admin/Home.vue")
        },
        {
            path: "setting",
            name: "setting",
            meta: { 
              requireAuth: true // 添加该字段,表示进入这个路由是需要登录的
            },
            component: () = import("/@/views/admin/Setting.vue")
        },
    ]
  },
  {// 博客主站pc端页面路由
    path: "/pc",
    redirect: "/pc/index",
    name: "pc",
    component: () = import("/@/views/pc.vue"),
    children: [
        {
            path: "index",
            name: "首页",
            component: () = import("/@/views/pc/Home.vue"),
        },
    ]
  },
  {// 博客主站手机端页面路由
    path: "/phone",
    redirect: "/phone/pindex",
    name: "phone",
    component: () = import("/@/views/phone.vue"),
    children: [
        {
            path: "pindex",
            name: "Home",
            component: () = import("/@/views/phone/Home.vue")
        },
    ]
  },
];
 
/**
 * 创建路由
 */
const router = createRouter({
  // hash模式:createWebHashHistory,
  // history模式:createWebHistory
  history: createWebHistory("/"),
  // history:createWebHashHistory(),
  routes,
});
 
/**
 * 路由守卫
 */
router.beforeEach((guard) = {
  beforeEach.checkAuth(guard, router);
});
 
/**
 * 路由错误回调
 */
router.onError((handler: ErrorHandler) = {
  console.log("error:", handler);
});
 
/**
 * 输出对象
 */
export default router;

当然,目前这个文件只能满足最基础的跳转,并且在路由首位中添加了404页跳转。以上基本都有注释,参考就好。

在页面中使用:

Vue3,是可以和vue2一样将router挂载至vue对象上的。

但是,官方不建议这么做,因此呢,vue-router是每个单页分别引入的。

大概是这个样子:

import { useRouter, useRoute } from "vue-router";
export default {
    name: "article,
    components: {},
    // VUE3 语法 第一个执行的钩子函数
    // setup官方文档
    // https://www.vue3js.cn/docs/zh/guide/composition-api-setup.html#参数
    setup(props: any, content: any) {
        // 实例化路由
        var router = useRouter();
       // 路由参数
        var route = useRoute();
        /**
         * @name: 声明data
         * @author: camellia
         * @email: guanchao_gc@qq.com
         * @date: 2021-01-18
         */
        const data = reactive({
            // 文章id
            article_id: route.query.article_id  route.query.article_id : 0,
        });
/**
         * @name: 子分类显示
         * @author: camellia
         * @email: guanchao_gc@qq.com
         * @date: 2021-01-15          */
        const cateSonShow = (cate_id_son:number) ={
            data.cate_id_son = cate_id_son;
            router.push(
            {
                path: '/pc/articleList',
                // 路由query传参
                query: {
                    cate_id_son: data.cate_id_son
                }
            });
        }
}

更多关于vue-router4的功能,请参考官方文档:

https://next.router.vuejs.org/installation.html

具体代码实现,请参考我的代码vue3代码库:https://gitee.com/camelliass/vue3blog

有好的建议,请在下方输入你的评论。

欢迎访问个人博客
https://guanchao.site

欢迎访问小程序:

VUE3(五)vue路由vue-router4 相关文章

  1. Vue组件化原理

    阅读目录 一. 什么是Vue组件 如何注册组件1.1 全局注册组件1.2 局部注册组件 二:组件之间数据如何传递的呢1) props2) $emit3) 使用$ref实现通信4)attrs和attrs和listeners 及 inheritAttrs5) 理解 provide 和 inject 用法6) 理解使用bus总线 三:在vue源码

  2. Vue2.5 去哪儿App项目学习【一】

    项目前期准备 安装Node.js 安装vue-cli 脚手架构建工具 使用vue-cli脚手架创建工程 vue-cli创建的项目目录结构 了解多页应用与单页应用 多页应用 多页应用由多个完整页面构成,每次页面跳转,后台都会返回一个新的HTML文档。 页面切换慢是因为每一次切换页面

  3. 2021-02-21:手写代码:高性能路由,也就是一个字符串和多个匹配串进行模糊匹配。一个数组arr里是[*a*,moonfdd],字符串moonfdd能匹配到,理由是arr里有。字符串xayy也能匹配到,理由是arr里的*a*,第1个星对应x,第2个星对

    2021-02-21:手写代码:高性能路由,也就是一个字符串和多个匹配串进行模糊匹配。一个数组arr里是[" a ","moonfdd"],字符串"moonfdd"能匹配到,理由是arr里有。字符串"xayy"也能匹配到,理由是arr里的" a ",第1个星对应"x",第2个星对应"yy"。 福哥答案202

  4. 面试官版前端面试小册Vue篇(二)

    Computed watch 和 method 答案: computed :默认 computed 也是一个 watcher 具备缓存,只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。如果一个数据依赖于其他数据,使用 computed watch :每次都需要执行函数。 watch 更适用于数

  5. vue中手写table的升降序

    有些时候,我们总是无可避免的需要自己去手撸一些东西,因为需求总是在不断的变化。例如,最开始的需求,我们只是在首页展示一个数据列表,此时,我们可能直接就自己手写了一个table,后来,突然增加了一个需求,例如:需要在一些指定的列上面增加排序功能。

  6. 前端Vue常用JS工具类汇总(可用于真实项目中,亲测可用)

    /** * Created by tanxiaobing on 2021/02/21. */ /* 合法uri*/export function validateURL(textval) { const urlregex = /^(https|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9])(\.(25[0-5]|2[0-4][0-9]|1

  7. vue中简易计算器

    div id="app" input type="text" v-model="n1" select v-model="fuhao" option value="+"+/option option value="-"-/option option value="*"*/option option value="/"//option /select input type="text" v-model="n2" input type="button" value="=" @cl

  8. vue + element ui 实现pdf文件下载和预览

    【应用场景】 选中表格的一条数据,然后点击下载pdf文件,实现下载功能 一:pdf文件下载功能 1、后端接口地址,首先在axios.post的请求中把默认的 " responseType:‘json’ " 改为" responseType:‘blob’ 如果是其他文件格式,参考 MIME多用途互联网邮件扩

  9. Vue - Vue-Router

    Vue-Router router-link 该标签是一个vue-router中已经内置的组件 它会被渲染成一个a标签 tag router-link tag="button"/router-link 此时不会默认渲染成a标签 而是button按钮 replace replaceState() active-class 当 router-link 对应的路由 匹配 成功时

  10. js数组的深入

    1、数组中的哪些方法是响应式的 因为Vue是响应式的,所以当数据发生变化时,Vue会自动检测数据变化,视图会发生对应的更新 Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新 1)push方法 == 响应式 this.letters.push('F');2)pop (

每天更新java,php,javaScript,go,python,nodejs,vue,android,mysql等相关技术教程,教程由网友分享而来,欢迎大家分享IT技术教程到本站,帮助自己同时也帮助他人!

Copyright 2020, All Rights Reserved. Powered by 跳墙网(www.tqwba.com)|网站地图|关键词