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 相关文章

Vue组件化原理
阅读目录一. 什么是Vue组件如何注册组件1.1 全局注册组件1.2 局部注册组件二：组件之间数据如何传递的呢1) props2) $emit3) 使用$ref实现通信4)attrs和attrs和listeners 及 inheritAttrs5) 理解 provide 和 inject 用法6) 理解使用bus总线三：在vue源码
Vue2.5 去哪儿App项目学习【一】
项目前期准备安装Node.js 安装vue-cli 脚手架构建工具使用vue-cli脚手架创建工程 vue-cli创建的项目目录结构了解多页应用与单页应用多页应用多页应用由多个完整页面构成，每次页面跳转，后台都会返回一个新的HTML文档。页面切换慢是因为每一次切换页面
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
面试官版前端面试小册Vue篇（二）
Computed watch 和 method 答案： computed ：默认 computed 也是一个 watcher 具备缓存，只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。如果一个数据依赖于其他数据，使用 computed watch ：每次都需要执行函数。 watch 更适用于数
vue中手写table的升降序
有些时候，我们总是无可避免的需要自己去手撸一些东西，因为需求总是在不断的变化。例如，最开始的需求，我们只是在首页展示一个数据列表，此时，我们可能直接就自己手写了一个table，后来，突然增加了一个需求，例如：需要在一些指定的列上面增加排序功能。
前端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
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
vue + element ui 实现pdf文件下载和预览
【应用场景】选中表格的一条数据，然后点击下载pdf文件，实现下载功能一：pdf文件下载功能 1、后端接口地址，首先在axios.post的请求中把默认的 " responseType:‘json’ " 改为" responseType:‘blob’ 如果是其他文件格式，参考 MIME多用途互联网邮件扩
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 对应的路由匹配成功时
js数组的深入
1、数组中的哪些方法是响应式的因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新 Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新 1）push方法 == 响应式 this.letters.push('F');2）pop (