Vue-router 路由

vue-router 使用步骤

  • 安装模块
npm install vue-router --save
// 引入模块
import VueRouter from 'vue-router'

// 作为 Vue 的插件
Vue.use(VueRouter)

// 创建路有实例对象
new VueRouter({
     ...配置参数
})
  • 告诉路由渲染的位置
    标签会自动匹配渲染子路由
<router-view></router-view>

功能配置

1. hash 和 history模式

  • 默认使用hash模式
    如果需要兼容至IE9,推荐使用默认的哈希模式
    hash
  • 切换 history 模式
    history
new Router({
    mode: 'history'
})
  • 导入页面组件
import Home from './views/Home.vue'
  • 配置项
new Router({
    // 配置当前导航页高亮样式类
    linkActiveClass: 'is-active',
    routes: [
        {
            // 路径
            path: '/',
            // 名字,推荐,因为路径可能会改动,而 name 不会
            name: 'home',
            // 设置导向的组件页面
            component: Home
        }
    ]
})
  • 绑定方式
<!-- 静态绑定 -->
<router-link to="/">home</router-link>

<!-- 动态绑定 -->
<router-link :to="index">home</router-link>          <!-- 变量 -->
<router-link :to="{path:'/'}">home</router-link>     <!-- 路径 -->
<router-link :to="{name:'home'}">home</router-link>  <!-- 名称 -->
  • 自定义元素标签,默认为 a 标签
<router-link to="/" tag="span">home</router-link>
  • 默认高亮
<router-link to="/" active-Class="is-active">home</router-link>

3. 重定向和别名

  • 默认事件为 click 触发,但这是可以改变的
<!-- 鼠标移入时触发跳转 -->
<router-link to="/" event="mouseover">home</router-link>
  • 重定向
new Router({
    routes: [
        {
            path: '*',
            name: 'home'

            // 重定向
            redirect: '/home',
            redirect: { path: '/home' }
            redirect: { name: 'home' }

            // 动态设置重定向的目标
            redirect: (to) => {
                if (to.path === '1') {
                    return '/home'
                } else if (to.path === '2') {
                    return { path: '/home' }
                } else {
                    return { name: 'about' }
                }
            }
        }
    ]
})
  • 别名
    访问 /home 和访问 /index 时一样的,且使用别名与标签属性 to 的值一致时**高亮
new Router({
    routes: [
        {
            path: '/inedx',
            alias: '/home',
            component: Home
        }
    ]
})

4. 嵌套路由的使用

  • 精确匹配
    全包含匹配(默认): 访问 /home/ 依然处于**状态
    精确匹配:访问 /home/ 不会处于**状态
<!-- 设置精确匹配: 添加 exact 属性 -->
<router-link to="/" exact>index</router-link>
  • 嵌套路由
    一旦有默认子路由,那就无需在父路由里设置 name
new Router({
    routes: [
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: '',          // 默认子路由 /home
                    name: 'About',
                    component: About
                },
                {
                    path: 'work',      // 跳转路径 /home/work
                    name: 'Work',
                    component: Work
                }
            ]
        }
    ]
})

5. 命名视图

  • 设置子路由 URL路径 相对于根路径,即去掉 home,组件嵌套不变
    这里写图片描述
new Router({
    routes: [
        {
            path: '/home',
            component: Home,
            children: [
                {
                    path: '/work',      // 设置`/`,相对与根路径
                    name: 'Work',
                    component: Work
                }
            ]
        }
    ]
})
  • 命名视图
    在同级展示多个视图(并列显示),而不是嵌套展示
<router-view></router-view>
<router-view name="slider"></router-view>
new Router({
    routes: [
        {
            path: '/home',
            components: {
                default: Home, // 默认组件
                slider: About  // 对应 name="slider" 的视图
            },
        }
    ]
})

6. 滚动行为

记录滚动条位置,后退或前进后保留页面滚动位置

new Router({
    /* 
        浏览器前进后退或切换导航时才会触发
        to: 要进入的目标路由对象
        from: 离开的路由对象
        savePosition: 记录滚动条坐标{x,y} 点击前进后退时记录值
    */
    scrollBehavior: (to, from, savePosition) {
        // 判断地址栏是否有 hash 值
        if (to.hash) {
            return {
                selector: to.hash
            }
        }
        // 定位页面滚动位置
        return savePosition ? savePosition : {x: 0, y: 0}
    }
})

7. 动态路径参数

匹配到的所有路由,全部都映射到同一个组件
路径: /user/:userId ,userId为动态路径参数
获取参数: 路由信息对象 $router.params

new Router({
    routes: [
        {
            path: '/user:userId?',  // user/1 /user/2, ?:匹配1次或0次
            component: User,
        }
    ]
})
  • 对组件注入
    $router,router实例对象
    $router,当前**的路由信息对象,每个组件实例都会有
    beforeRouterEnter(),进入组件前钩子函数
    beforeRouterLeave(),离开组件前钩子函数
  • 路由信息对象
    path 字符串,对应当前路由的路径
    params 对象,包含动态路由参数
    quary 对象,URL 查询参数
    hash 字符串,当前路由的 hash 值
    fullPath 字符串,URL包含查询参数和 hash 的完整路径
    matched 数组,包含当前路由的所有嵌套路径片段的 路由记录
    name 字符串, 当前路由的名称

8. 监控 $router 路由信息对象

watch: {
    $router () {
        // 路径发生变化,$router会重新赋值
        console.log(this.$router.params)
    }
}

9. query 字符串传参

  • 设置
<router-link to="?name=jack" exact></router-link>
<router-link :to="{path: '', query: {name: 'jack'}}" exact></router-link>
  • 获取
this.$router.query

10. 导航切换过渡动画 transition 使用

提供了transition的封装组件,添加过渡动画

这里写图片描述
过渡的 CSS 类名,使用 name 属性改变类名前缀

  • v-enter : 定义 进入 过渡的 开始 状态
  • v-enter-active : 定义进入 活动 状态
  • v-enter-to : 定义进入的 结束 状态
  • v-leave : 定义 离开 过渡的 开始状态
  • v-leave-active : 定义离开 活动状态
  • v-leave-to : 定义离开的 结束状态
<transition>
    <router-link to="/home"></router-link>
</transition>
/* 开始(进入)、结束(离开)*/
.v-enter, .v-leave-to {
    opacity: 0
}
/* 结束(进入)、开始(离开)*/
.v-enter-to, .v-leave {
    opacity: 1
}
/* 过渡时间 */
.v-enter-active,
.v-leave-active {
    transition: 1s
}
  • 过渡模式,默认为同时过渡
    out-in : 当前元素先进行过渡,完成之后新元素过渡进入
    in-out : 新元素先进行过渡,完成之后当前元素过渡离开
<transition mode="out-in">
    <router-link></router-link>
</transition>

11. 动态设置 name 属性左右切换

这里写图片描述

  • HTML
<transition name="names" mode="out-in">
    <router-link></router-link>
</transition>
  • JS
export default {
    data () {
        return {
            names: 'L'
        }
    },
    watch: {
        $route (to, from) {
            if (to.meta.index < from.meta.index) {
                this.names = 'right'
            } else {
                this.names = 'left'
            }
        }
    }
}
  • CSS
.L-enter,
.R-leave-to {
    transform: translateX(100%)
}
.L-leave-to,
.R-enter {
    transform: translateX(-100%)
}
.L-enter-to,
.L-leave,
.R-enter-to,
.R-leave {
    transform: translateX(0)
}
.L-enter-active,
.L-leave-active,
.R-enter-active,
.R-leave-active {
    transition: 1s
}
  • 设置路由元信息
    在路由配置中meta可以配置一些数据,用在路由信息对象中
    访问meta中数据:$route.meta
new Router({
    routes: [
        {
            path: '/home',
            component: Home,
            meta: { index: 0 }
        },
        {
            path: '/work',
            component: Work,
            meta: { index: 1 }
        },
        {
            path: '/about',
            component: About,
            meta: { index: 2 }
        }
    ]
})

12. 编程式导航

借助于 router 的实例方法,通过编写代码来实现导航的切换

  • back : 回退一步
  • forward : 前进一步
  • go : 指定前进回退步数
  • push : 导航到不同url,向 history 栈 添加 一个新的记录
  • replace : 导航到不同url,替换 history 栈中当前记录
export default {
    methods: {
        backPage () {
            this.$router.back()
        },
        forwardPage () {
            this.$router.forward()
        },
        goPage () {
            this.$router.go(-2)  // 退回2步
            this.$router.go(3)   // 前进3步
            this.$router.go(0)   // 刷新当前页面
        },
        pushPage () {
            this.$router.push('/home')     // 新纪录
        },
        replacePage () {
            this.$router.replace('/home')  // 替换纪录
        },
    }
}

13. 全局钩子函数

导航发生变化时,导航钩子主要用来拦截导航,让它完成跳转或取消

  • 钩子函数
    router全局:beforeEachafterEach
    单个路由:beforeEnter
    组件中:beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave

  • 钩子函数接收的参数
    to : 要进入的目标 路由对象 到哪里去
    from : 正要离开导航的路由对象 从哪里来
    next : 用来决定跳转或取消导航

let router = new Router({
    routes: [
        {
            path: '/home',
            component: Home,
            beforeEnter: (to, from, next) {
                // 单个路由
                next()
            }
        }
    ]
})

// 进入导航前
router.beforeEach((to, from, next) => {
    // router全局
    next(false) // 取消导航
    to.meta.login ? next('/login') : next()
})

// 进入导航后
router.afterEach((to, from, next) => {
    window.document.title = to.meta.title || 'miaov'
})

14. 组件级钩子函数

export default {
    data () {
        return {
            test: '改变前'
        }
    },
    beforeRouteEnter (to, from, next) {
        // 进入导航, 比 beforeCreate 先执行
        next((vm) => {
            // vm : 当前组件实例
            vm.test = '改变了'
        })
    },
    beforeRouteUpdate (to, from, next) {
        // 二级导航更新
    },
    beforeRouteLeave (to, from, next) {
        // 离开导航
    }
}

15. 滚动动画

npm i tween.js --save
import TWEEN from 'tween.js'

export default {
    // 进入导航后自动到哈希位置
    beforeRouteEnter (to, from, next) {
        next(() => {
            vm.animate(to)
        })
    },
    // 路由更新后更新哈希位置
    beforeRouteUpdate (to, from, next) {
        this.animate(to)
        next()
    },
    methods: {
        animate (to) {
            function animateFunc () {
                requestAnimationFrame(animateFunc)
                TWEEN.update(time)
            }
            if (to.hash) {
                // 获取锚点元素
                let el = document.getElementById(to.hash.slice(1))
                // 获取容器元素
                let doc = document.getElementsByClassName('doc')[0]
                if (el) {
                    animateFunc()
                    new TWEEN.Tween({
                        number: doc.scrollTop  // 起始位置
                    })
                    .to({
                        number: el.offsetTop   // 目标位置
                    }, 500)
                    .onUpdate(function() {
                        doc.scrollTop = this.number.toFixed(0)
                    })
                    .start()
                }
            }
        }
    }
}

16. 利用 webpack 实现懒加载

把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件

  • webpack代码分割功能
const Header = (resolve) => {
    // 代码分块(依赖, 回调, [chunk名字])
    return require.ensure([], () => {
        // 载入组件
        resolve(require('@/components/Header'))
    }, 'user')
}

const Footer = (resolve) => {
    return require.ensure([], () => {
        resolve(require('@/components/Footer'))
    }, 'user') // webpack会将chunk名称相同打包到一个文件
}

const Aside = (resolve) => {
    // import 方式相对的只能打包一个文件
    return import('@/components/Aside')
}

export default {
    // vue 中 components 也可以传递函数
    components: {
        Header,
        Footer,
        Aside
    }
}

17. 服务器配置

  • build/index.js
module.exports = {
    build: {
        assetsPublicPath: '/dist/'
    }
}
  • Nginx配置
location / {
    root /home/应用跟目录;
    try_files $uri $uri/ /index.html =404;
}
  • Appache配置
    apache → httpd.conf
LoadModule rewrite_module modules/mod_rewrite.so

<Directory>
    AllowOverride all
</Directory>

AllowOverride all

在 www 下新建 .htaccess 文件,内容如下:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /dist/index.html [L]
</IfModule>
版权声明:本文为wildye原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/wildye/article/details/81161354

智能推荐

Netty框架构建Nio编程

~~~ 随手点赞,养成习惯 ~~~ 为什么选择Netty框架 Netty是业界最流行的NIO框架之一,它的健壮性、功能、性能、可定制性和可扩展性在同类框架中都是首屈一指的。 优点: ① API使用简单,开发门槛低 ②功能强大,预置了多种编解码功能,支持多种主流协议 ③ 定制能力强,可以通过ChannelHandler对通信框架进行灵活地扩展; ④性能高,通过与其他业界主流的NIO框架对比,Nett...

【JZOJ5262】【GDOI2018模拟8.12】树(DP,性质题)

Description Solution 首先我们可以知道两个性质:1、路径u-v和路径v-w可以合并为路径u-w;2、路径u1-v1加路径u2-v2和路径u1-v2加路径u2-v1是等价的(就是起始点和终点可以互换) 那么知道这些性质之后就很好做了。我们只用知道每个点多少次做起点和多少次做终点。 我们设f[i]表示满足i子树的需求i上的值要是多少。 那么枚举i的所有儿子,判断a[i]-f[i],...

【String-easy】541. Reverse String II 反转的元素,有反转个数和间隔

1. 题目原址 https://leetcode.com/problems/reverse-string-ii/ 2. 题目描述 3. 题目大意 给定一个字符串,和字符串的间隔k, 这个k表示每k个数反转一次,然后再间隔k个元素再反转k个元素。 4. 解题思路 只要按照间隔去反转就可以了。然后间隔k个元素不反转是通过让i每次递增 2*k完成的。 5. AC代码 6. 相似题型 【1】344. Re...

【C语言笔记结构体】

我们都知道C语言中变量的类型决定了变量存储占用的空间。当我们要使用一个变量保存年龄时可以将其声明为int类型,当我们要使用一个变量保存某一科目的考试成绩时可以将其声明为float。 那么,当我们要做一个学生信息管理系统时,需要保存学生的姓名、学号、年龄等信息,该怎么做呢? 如当要保存三个学生的信息时, 方法一是: 方法二是: 显然,方法二跟更清晰,因为它把name、num、age都集成在一个模板,...

39. Combination Sum 回溯算法简析

LeetCode传送门     这道题要求给你一组正数 C,然后给你一个目标数 T,让你从那组C中找到加在一起等于 T 的那些组合。     例如:给你 [2,3,6,7] 和 7,则返回 [[2,2,3],[7] ] 。      想解决这个问题前,我们首先引入一个新问题,图(树)的遍历问题。  ...

猜你喜欢

git安装|Linux系统安装 git|Linux如何安装git?Linux通过远程安装git|

Git是一个开源的分布式版本控制系统,可以有效、高速地处理项目版本管理。Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 开发者需要一个GIT账号,通过这个查看项目的提交记录,可以更加清楚项目的开发情况,便于版本控制。 以下介绍在CentOS8操作系统搭建GIT服务器。   一、安装GIT服务器流程   安装GIT...

Vue框架基础概要

  Vue.js是什么? Vue.js(读音 /vjuː/,类似于 view 的读音)是一套构建用户界面(user interface)的渐进式框架。与其他重量级框架不同的是,Vue 从根本上采用最小成本、渐进增量(incrementally adoptable)的设计。Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成。另一方面,当与单文件组件和...

基于Prometheus和Grafana的监控平台 - 运维告警

通过前面几篇文章我们搭建好了监控环境并且监控了服务器、 数据库、应用,运维人员可以实时了解当前被监控对象的运行情况,但是他们不可能时时坐在电脑边上盯着DashBoard,这就需要一个告警功能,当服务器或应用指标异常时发送告警,通过邮件或者短信的形式告诉运维人员及时处理。 今天我们就来聊聊 基于Prometheus和Grafana的监控平台的异常告警功能。 告警方式 Grafana 新版本的Graf...

mac安装tomcat

下载tomcat 前往官网下载:https://tomcat.apache.org/download-90.cgi 下载 解压tomcat 将apache-tomcat-9.0.36.tar.gz解压并重命名为Tomcat 移动Tomcat 打开访达使用快捷键Command+Shift+G进入/Library/,将刚才解压并重命名的Tomcat放进去 快捷键 Library 修改权限 进入终端输入...