Vue-Router

Vu-router是Vue.js的官方路由管理器,方便于构建页面,在我们的使用过程中,一般是在router的index.js文件中配置对应的组件和对应的路径

主要的功能

  • 嵌套路由
  • 模块化的、基于组件的路由配置
  • 路由参数、查询、通配符
  • 视图过度效果
  • 细粒度的导航控制

核心文件

router中的index.js文件

// 引入vue框架
import Vue from 'vue'
// 引入vue-router路由依赖
import Router from 'vue-router'
// 引入页面组件,命名为HelloWorld
import HelloWorld from '@/components/HelloWorld' // Vue全局使用Router
Vue.use(Router) // 定义路由配置
export default new Router({
routes: [ //配置路由,这里是个数组
{ //每一个链接都是一个对象
path: '/', //链接路径
name: 'HelloWorld', //路由名称,
component: HelloWorld //对应的组件模板
}
]
})

使用

在入口文件(main.js)中注入router

// 引入vue框架
import Vue from 'vue'
// 引入根组件
import App from './App'
// 引入路由配置
import router from './router' // 关闭生产模式下给出的提示
Vue.config.productionTip = false // 定义实例
new Vue({
el: '#app',
router, // 注入框架中,其实在注入状态管理的时候也是这个路子
components: { App },
template: '<App/>'
})

页面跳转

router-link标签跳转

<p>导航 :
<router-link to="/">首页</router-link>
<router-link to="/hello">hello</router-link>
</p>

编程式导航-JS代码内部跳转

this.$router.push('/xxx')

<button @click="goHome">回到首页</button>
export default {
name: 'app',
methods: {
goHome(){
this.$router.push('/home');
}
}
}

其他方法

//  后退一步记录,等同于 history.back()
this.$router.go(-1)
// 在浏览器记录中前进一步,等同于 history.forward()
this.$router.go(1)

子路由-路由器嵌套

子路由,也叫路由器嵌套,采用在children后跟路由数组实现

//Home.vue
<template>
<div>
<router-view />
<ul>
<li>
<router-link :to="{name:'list'}">待办事项</router-link>
</li>
<li>
<router-link :to="{name:'add'}">个人中心</router-link>
</li>
</ul>
</div>
</template>
//router->index.js
const routes = [{
path: '/home',
name: 'home',
component: Home,
children: [{
path: 'list',
name: 'list',
component: () => import( /* webpackChunkName: "list" */ '../views/List.vue')
}, {
path: 'user',
name: 'user',
component: () => import( /* webpackChunkName: "user" */ '../views/User.vue')
}, ]
},
]

路由传递参数

  1. 通过router-link标签中的to传参

    就如同上面的通过to传递参数到达对应的子路由
  2. url中传递参数
//以冒号的形式传递参数      router->index.js
{
path:'/home/two/:id/:name', // 子页面2
component:Two
} //接收参数 在vue组件中书写
<p>ID:{{ $route.params.id}}</p>
<p>名称:{{ $route.params.name}}</p> //路由跳转,在src/components/Home.vue中添加
<router-link to="/home/two/1/张三">子页面2</router-link> //特殊规则下加入正则表达式
{
path:'/home/two/:id(\\d+)/:name', // 子页面2
component:Two
}
  1. 编程式导航-params传递参数
  2. 编程式导航-query传递参数

命名路由-命名视图-重定向-别名

  1. 命名路由

    给定路由一个唯一的名称,然后调转调用这个路由:

    在index.js中配置路由属性,在组件页面中调用

  2. 命名视图

    在同一个页面展示多个视图,如果不用嵌套的话,只能通过命名视图来实现了,

//src/router/index.js
import Vue from 'vue'
import Router from 'vue-router'
// 创建页面组件
const Header = { template: '<div>Header</div>' }
const Left = { template: '<div>Left</div>' }
const Right = { template: '<div>Right</div>' } Vue.use(Router) export default new Router({
routes: [
{
path: '/', // 主页路由
components: {
default: Header,
a: Left,
b: Right
}
}
]
})
//src/app.vue
<template>
<div id="app">
<router-view />
<router-view name="a" class="left" />
<router-view name="b" class="right" />
</div>
</template> <script>
export default {
name: 'App'
}
</script>

命名视图只能放在最顶级的页面中

  1. 重定向

    通过在router中配置关键词redirect来实现的
//src/router.index.js
export default new Router({
routes: [
{
path: '/', // 默认页面重定向到主页
redirect: '/home' // 重定向
},
{
path: '/home', // 主页路由
component: Home,
children:[ // 嵌套子路由
{
path:'/home/two/:id/:name', // 子页面2
component:Two
},
{
path:'/home/three/:id/:name', // 子页面3
name: 'three', // 路由名称-命名路由
redirect: '/home/two/:id/:name' // 重定向-传递参数
},
]
}
]
})
//src/components/Home.vue
<router-link to="/">首页</router-link> |
<router-link to="/home/two/1/lisi">子页面2</router-link> |
<router-link :to="{name: 'three', params: {id: 1, name: 'zhangsan'}}">子页面3</router-link>
  1. 别名

    别名是通过router的配置中的alias来实现的
//src/router/index.js
{
path:'/one', // 子页面1
component:One,
alias: '/oneother'
} //src/components/Home.vue
<router-link to="/oneother">子页面1</router-link>

redirect和alias的区别

redirect:直接改变了url的值,把url变成了真实的path路径。

alias:url路径没有别改变,这种更友好,让用户知道自己访问的路径,只是改变了中的内容。

  1. mode与404

  2. 路由钩子

    路由钩子(导航钩子),也就是路由拦截器

  3. 全局钩子常用

//src/route/index.js
// 定义路由配置
const router = new VueRouter({ ... }) // 全局路由拦截-进入页面前执行
router.beforeEach((to, from, next) => {
// 这里可以加入全局登陆判断
// 继续执行
next();
}); // 全局后置钩子-常用于结束动画等
router.afterEach(() => {
//不接受next
});
export default router;

每个钩子方法接收三个参数:

to: Route : 即将要进入的目标 [路由对象]

from: Route : 当前导航正要离开的路由

next: Function : 继续执行函数

  1. 路由单独钩子
//src/router/index.js
{
path:'/home/one', // 子页面1
component: One,
// 路由内钩子
beforeEnter: (to, from, next) => {
console.log('进入前执行');
next();
}
}
  1. 组件内钩子
<script>
export default {
name: 'Two',
data () {
return {
msg: 'Hi, I am Two Page!'
}
},
// 进入页面前调用
beforeRouteEnter(to, from, next) {
console.log('进入enter路由钩子')
next()
},
// 离开页面调用
beforeRouteLeave(to,from, next){
console.log('进入leave路由钩子')
next()
},
// 页面路由改变时调用
beforeRouteUpdate(to, from, next) {
console.log('进入update路由钩子')
console.log(to.params.id)
next()
}
}
</script>
  1. 路由懒加载
  2. 正常模式
// 1、先引入页面组件
import Home from '@/components/Home' // 2、使用组件
{
path: '/home',
component: Home
}

2.懒加载模式

提高了页面初始化的效率

component: (resolve) => require(['@/components/One'], resolve)

component: () => import('@/components/Two')

components: r => require.ensure([], () => r(require('@/components/Three')), 'group-home')

关于Vue-Router的那些事儿的更多相关文章

  1. [VUE]关于路由哪些事儿

    什么是路由 之前有个小伙伴面试被问到:面试官:不用vue能不能写单页面应用?答:用angular啊(咳咳,开个玩笑),答案确实是可以的,原生js中有个事件叫做onhashchange,可以在windo ...

  2. Vue 2.0 + Vue Router + Vuex

    用 Vue.js 2.x 与相配套的 Vue Router.Vuex 搭建了一个最基本的后台管理系统的骨架. 当然先要安装 node.js(包括了 npm).vue-cli 项目结构如图所示: ass ...

  3. vue router 只需要这么几步

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  4. Vue.js 2.x笔记:路由Vue Router(6)

    1. Vue Router简介与安装 1.1 Vue Router简介 Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,构建单页面应用. Vue Rout ...

  5. Vue Router学习笔记

    前端的路由:一个地址对应一个组件 Vue Router中文文档 一.路由基本使用 第1步:导入Vue Router: <script src="https://unpkg.com/vu ...

  6. vue router.push(),router.replace(),router.go()和router.replace后需要返回两次的问题

    转载:https://www.cnblogs.com/lwwen/p/7245083.html https://blog.csdn.net/qq_15385627/article/details/83 ...

  7. 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI

    一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...

  8. 深入浅出的webpack4构建工具---webpack+vue+router 按需加载页面(十五)

    1. 为什么需要按需加载? 对于vue单页应用来讲,我们常见的做法把页面上所有的代码都打包到一个bundle.js文件内,但是随着项目越来越大,文件越来越多的情况下,那么bundle.js文件也会越来 ...

  9. 深入浅出的webpack构建工具--webpack4+vue+router项目架构(十四)

    阅读目录 一:vue-router是什么? 二:vue-router的实现原理 三:vue-router使用及代码配置 四:理解vue设置路由导航的两种方法. 五:理解动态路由和命名视图 六:理解嵌套 ...

  10. python 全栈开发,Day91(Vue实例的生命周期,组件间通信之中央事件总线bus,Vue Router,vue-cli 工具)

    昨日内容回顾 0. 组件注意事项!!! data属性必须是一个函数! 1. 注册全局组件 Vue.component('组件名',{ template: `` }) var app = new Vue ...

随机推荐

  1. 菊长说丨一文读懂MySQL4种事务隔离级别

    经常提到数据库的事务,那你知道数据库还有事务隔离的说法吗,事务隔离还有隔离级别,那什么是事务隔离,隔离级别又是什么呢?今天我们就找菊长去,请他帮大家梳理一下这些各具特色的事务隔离级别,咱走着~~~ 点 ...

  2. Springboot开启事务的支持

    主要分为两步 步骤一.在main方法加上@EnableTransactionManagement注解: @SpringBootApplication @EnableTransactionManagem ...

  3. 【Java】AES加机解密工具类代码

    import java.security.NoSuchAlgorithmException; import java.security.SecureRandom; import javax.crypt ...

  4. Oracle 存储过程 批量插入测试数据

    有时候需要做DB的效率测试时,需要模拟大量数据.可以根据一条原始数据,通过执行存储过程拷贝出大量数据: CREATE OR REPLACE PROCEDURE proc_msw_strsql IS i ...

  5. C#设计模式之0-简单工厂模式

    简单工厂模式(Simple Factory Pattern) 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/387 访问 ...

  6. CSS卡片右上角标记样式设计

    template <div class="each-one-in-list"> <div class="show-icon">进行中&l ...

  7. troubleshoot之:使用JFR解决内存泄露

    目录 简介 一个内存泄露的例子 使用JFR和JMC来分析内存泄露 OldObjectSample 总结 简介 虽然java有自动化的GC,但是还会有内存泄露的情况.当然java中的内存泄露跟C++中的 ...

  8. 基础类库积累--ExeclHelper类

    前言: 相信大家都玩过NPOI这个第三方组件,我就分享一下我平时使用的工具类,如果有不好的地方,请赐教! NPOI是什么? NPOI是一个开源的C#读写Excel.WORD等微软OLE2组件文档的项目 ...

  9. 修改linux 动态ip为静态ip

    vi /etc/sysconfig/network-scripts/ifcfg-ens33 BOOTPROTO=static 设置网卡引导协议为 静态 ONBOOT=yes 网卡开机自启动 配置[IP ...

  10. 分析dubbo心跳检测机制

    目的: 维持provider和consumer之间的长连接 实现: dubbo心跳时间heartbeat默认是60s,超过heartbeat时间没有收到消息,就发送心跳消息(provider,cons ...