Vue-router路由的简单使用
一.Vue-Router环境的安装:
如果使用vue-cli脚手架搭建,项目创建过程中会提示你自否选择使用vue-router,选择使用即可,
二.路由学习
1.路由的配置
vue-cli项目自动创建的路由文件是src包下面的router.js文件,你也可以创建一个文件夹.单独放置路由的js文件
例如,
路由js文件的结构
import Vue from 'vue'
import Router from 'vue-router' Vue.use(Router) export default new Router({
routes: [
{
//path 表示路由的路径
path: '/',
//component 表示路由路径对应的组件(这里配置的是路由懒加载,不使用这个路由就不加载,提高性能)
component: () => import('./views/Parent.vue'),
//redirect 表示路由的重定向,表示访问该路由时(Parent路由)会重定向到另一个路由
redirect: '/form'
},
{
path: '/home/:id',
//name表示为路由取一个名称
name: 'home',
component: () => import('./views/Home.vue'),
//嵌套路由,这里就是嵌套了一个children路由组件
children: [{
path: '/child',
component: () => import('./views/Child.vue')
}]
}
]
})
2.路由的导航(路由的跳转)
使用<router-view>把标签进行路由的渲染,用于渲染匹配到的组件,最高级时App.vue,router.js里面的路由都可以使用router-view将组件渲染到App.vue下面,
router-link标签完成路由的跳转
两种方式:
1.通过<router-link>点击这里跳转</router-link>标签去跳转
router-link是一个组件,它默认会被渲染成一个带有链接的a标签,通过to属性指定链接的地址
2.编程式导航(录入登录页面,点击登录,获取到ajax请求的结果后可以进行登录)
通过方法去触发导航
this.$router.push({name:'路由名称',params:{id:3}}) 通过路由名称name去导航 (通常时和params参数组合)
this.$router.push({path:'路由路径',query:{name:'Jack'}}) 通过路由路径path去导航(通常时通过query参数组合使用)
<template>
<div id="app">
<!-- this is app -->
<button @click="toHome">编程式导航</button>
<!--router-link标签导航-->
<router-link to="/home/123">点击跳转到home组件</router-link>
<router-view></router-view>
</div>
</template> <script>
import bus from './util/bus'
import MParent from './views/Parent'
export default {
data () {
return {
a: 'msga',
b: 'msga',
c: 'msga',
}
},
components: {
MParent,
},
methods: {
passMsg () {
bus.$emit('msg', 'i am from app')
},
toHome () {
// this.$router.push({ path: '/home', query: {name: 'Jack'} })
//编程式导航
this.$router.push({ name: 'home', params: {id: 3} })
}
},
}
</script>
3.动态路由
什么是动态路路由
组件是同一个,只是通过不不同的url参数渲染不不同的数据
路路径参数"使用冒号" : 标记
{
path: '/home/:id',
component: home
}
在path⾥里里显式声明后,通过params传参后,参数不丢失同时参数被设置成必传参数
接收路由的参数:
<template>
<div>
this is home
<h1>{{$route.params.id}}</h1>
<router-view></router-view>
</div>
</template> <script>
export default { }
</script>
4.路由导航守卫(在main.js里面配置)
通过router中的beforeEach注册全局守卫,每次切换路路由时触发
// to, from是路路由对象,我们在路路由⾥里里定义的参数都可以在这⾥里里取到,例例如to.path或 from.name main.js文件里面
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/index'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; Vue.config.productionTip = false Vue.use(ElementUI)
//路由守卫
router.beforeEach((to, from, next) => {
console.log(to.path)
next()
}) new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
参数
to: 将进⼊入的路路由对象
from: 将离开的路路由对象
next() 确认完成操作,最后一定要调用,不然路路由就不会进行行切换
5.路由的懒加载
形式:
path:'/xxxx'
component: () => import('./views/Home.vue'),
路由懒加载的优点:
1.提高页面的响应速度;
2.避免进入项目后加载全部组件;
3.在路由中的component中设置函数,用import方式进行使用;
Vue-router路由的简单使用的更多相关文章
- 前端MVC Vue2学习总结(八)——Vue Router路由、Vuex状态管理、Element-UI
一.Vue Router路由 二.Vuex状态管理 三.Element-UI Element-UI是饿了么前端团队推出的一款基于Vue.js 2.0 的桌面端UI框架,手机端有对应框架是 Mint U ...
- Vue系列:Vue Router 路由梳理
Vue Router 是 Vue.js 官方的路由管理器.它和 Vue.js 的核心深度集成,让构建单页面应用变得易如反掌.包含的功能有: 嵌套的路由/视图表 模块化的.基于组件的路由配置 路由参数. ...
- 04 Vue Router路由管理器
路由的基本概念与原理 Vue Router Vue Router (官网: https://router.vuejs.org/zh/)是Vue.js 官方的路由管理器. 它和vue.js的核心深度集成 ...
- Vue Router路由管理器介绍
参考博客:https://www.cnblogs.com/avon/p/5943008.html 安装介绍:Vue Router 版本说明 对于 TypeScript 用户来说,vue-router@ ...
- Vue Router 路由守卫:完整的导航解析流程
完整的导航解析流程 1 导航被触发. 2 在失活的组件里调用离开守卫. 3 调用全局的 beforeEach 守卫. 4 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+). ...
- Vue Router路由守卫妙用:异步获取数据成功后再进行路由跳转并传递数据,失败则不进行跳转
问题引入 试想这样一个业务场景: 在用户输入数据,点击提交按钮后,这时发起了ajax请求,如果请求成功, 则跳转到详情页面并展示详情数据,失败则不跳转到详情页面,只是在当前页面给出错误消息. 难点所在 ...
- vue.js路由参数简单实例讲解------简单易懂
vue中,我们构建单页面应用时候,一定必不可少用到vue-router vue-router 就是我们的路由,这个由vue官方提供的插件 首先在我们项目中安装vue-router路由依赖 第一种,我们 ...
- Vue Router 路由实现原理
一.概念 通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式 更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
- Vue - Router 路由
路由的注册 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- vue router路由(三)
当环境搭建及Vue语法与指令都有所了解,该说下router. build目录是打包配置文件 (不建议动) config是vue项目基本配置文件 dist是构建后文件 js 手动创建 (根据需要) no ...
随机推荐
- 基于TI 多核DSP 的大数据智能计算处理解决方案
北京太速科技有限公司 大数据智能计算,是未来的一个发展趋势,大数据计算系统主要完成数据的存储和管理:数据的检索与智能计算. 特别是在智能城市领域,由于人口聚集给城市带来了交通.医疗.建筑等各方面的压力 ...
- 64-基于TMS320C6455、XC5VSX95T 的6U CPCI无线通信处理平台
基于TMS320C6455.XC5VSX95T 的6U CPCI无线通信处理平台 1. 板卡概述 本板卡由我公司自主研发,基于CPCI架构,符合PICMG2.0 D3.0标准,包含双TI TMS3 ...
- wait()和sleep()、sleep()和yield()的区别
wait()和sleep()的区别主要表现在一下几个方面: 原理不同.sleep()方法是Thread类的静态方法,是线程用来控制自身流程的.它会使线程暂停执行一段时间,把执行机会让给其他线程,等到时 ...
- KMP,Trie,AC自动机题目集
字符串算法并不多,KMP,trie,AC自动机就是其中几个最经典的.字符串的题目灵活多变也有许多套路,需要多做题才能体会.这里收集了许多前辈的题目做个集合,方便自己回忆. KMP题目:https:// ...
- 2019CCPC网络预选赛 1004 path 最短路
题意:给你一张n个点m条边的有向图,问这张有向图的所有路径中第k短的路径长度是多少?n, m, k均为5e4级别. 思路:前些日子有一场div3的F和这个题有点像,但是那个题要求的是最短路,并且k最大 ...
- 学会如何使用shiro
摘:https://www.cnblogs.com/learnhow/p/5694876.html 一.架构 要学习如何使用Shiro必须先从它的架构谈起,作为一款安全框架Shiro的设计相当精妙.S ...
- Center os6.5 mysql
1 # yum -y install mysql-server mysql mysql-dev 2 启动mysql # service mysqld start 3 为root用户配置一个密码 ...
- PHP curl_error函数
curl_error — 返回一个保护当前会话最近一次错误的字符串 说明 string curl_error ( resource $ch ) 返回一条最近一次cURL操作明确的文本的错误信息. 参数 ...
- 安装和使用Redis【转】
Redis是一个高性能的内存数据库,它体积轻巧性能又高,在企业中被广泛使用. 安装Redis Windows安装 Redis是为Linux系统设计的,但是也有团队为Windows做了移植.我们可以到这 ...
- mysql启动以及常用命令汇总
mysql57的启动 常用命令 : show databases : 展示所有数据库 use 数据库名 : 连接数据库 show tables ...