Vue技术点整理-Vue Router
路由 Vue Router
对于单页面应用来说，如果涉及到多个页面的话，就必须要使用到路由，一般使用官方支持的 vue-router 库
一，Vue Router 在项目中的安装引用
1，在页面中使用<script>快速使用Vue Router开发
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>使用script直接引入Vue Router</title>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
<h1>页面共同header</h1>
<p>
<router-link to="/first">页面1</router-link>
<router-link to="/second">页面2</router-link>
</p>
<router-view></router-view>
</div>
<script> //template也可以使用import从外部引入进来
const first = { template: '<div>I am first</div>' }
const second = { template: '<div>I am second</div>' }
const routes = [
{ path: '/first', component: first },
{ path: '/second', component: second }
]
const router = new VueRouter({
routes
})
const app = new Vue({
router
}).$mount('#app')
</script>
</body>
</html>
2，在vue cli框架使用路由
app.js
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router.js";
Vue.config.productionTip = false; new Vue({
router,
render: h => h(App)
}).$mount("#app");
router.js
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
const routes = [
{
path: '/index',
name: 'index',
component: () => import("@/views/index.vue"),
},
{
path: '/login',
name: 'login',
component: () => import("@/views/login.vue"),
},
{
path: '/fansNumber',
name: 'fansNumber',
component: () => import("@/views/fansNumber.vue"),
}
]; routes.forEach(route => {
route.path = route.path || '/' + (route.name || '');
});
const router = new Router({ routes });
router.beforeEach((to, from, next) => {
//路由执行之前，处理一些逻辑
next();
})
export default router;
二，Vue Router 基础功能用法
1，router-路径式传参
//路由定义 router.js
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: '/user/:id', component: User }
]
}) //第一种编程式跳转指定路由 test.vue
const userId = '123'
this.$router.push({
path: '/user/' + userId
})
//第二种编程式跳转指定路由 test.vue
this.$router.push({
name: 'user',
params: userId
})
//声明式跳转指定路由 test.vue
<router-link to="/user/{{userId}}">
<span>跳转</span>
</router-link> //在user的js里面接收参数
created() {
console.info(this.$route.params.userId)
}
注：你可以在一个路由中设置多段『路径参数』，对应的值都会设置到 $route.params 中。例如：
| 模式 | 匹配路径 | $route.params |
| /user/:username | /user/jack | { username:'jack' } |
| /user/:username/pwd:password | /user/jack/pwd/123 | { username:'jack',pwd:123 |
2，router-get方式传参
//路由定义 router.js
const router = new VueRouter({
routes: [
{ path: '/user', component: User }
]
}) //编程式跳转到指定路由 test.vue
this.$router.push({
name: "user",
query: {
userName: 'jack'
pwd: '123'
}
});
//在user的js里面接收参数
created() {
console.info(this.$router.query.userName)
console.info(this.$router.query.pwd)
}
3，编程式导航
- router.replace() 和 router.push() 一样的用法，区别为：
- router.push() 每次调用，都会往history里面添加一条新纪录，可以返回历史页面
- router.replace() 每次调用，不会往history里面添加记录，而是会替换掉当前的history记录，没有历史记录
- router.go(1) //浏览器中，向前进一步，等同于history.foward()
- router.go(-1) //浏览器中，向后一步，等同于history.back()
4，基于路由的动态过渡效果
<template>
<div id="app">
<transition name="fade">
<router-view></router-view>
</transition>
</div>
</template>
<style lang="scss">
.fade-enter-active{
transition: opacity .6s;
}
.fade-enter{
opacity: .5;
}</style>
5，导航守卫，过滤器
const router = new VueRouter({
routes: [
{
path: "/home",
name: "Home",
component: Home,
meta: {
type: '1',
title: '首页'
}
}
]
});
//路由执行前
router.beforeEach((to, from, next) => {
//校验token是否过期
if(to.token && Util.checkToken(to.token)){
return next({path: to.path});
}else{
return next({path: '/login'});
}
//使用路由自定义meta，统一处理title
const title = to.meta && to.meta.title;
if (title) {
document.title = title;
}
})
//路由执行后
router.afterEach((to) => {
//恢复页面滚动位置
window.scrollTo(0, 0);
});
export default router;
6，使用scrollBehavior中的异步滚动
const router = new Router({
scrollBehavior(to, from, savedPosition) {
// keep-alive 返回缓存页面后记录浏览位置
if (savedPosition && to.meta.keepAlive) {
return savedPosition;
}
// 异步滚动操作
return new Promise((resolve) => {
setTimeout(() => {
resolve({ x: 0, y: 1 });
}, 0);
});
},
});
更多功能，请参考router官网
Vue技术点整理-Vue Router的更多相关文章
- Vue技术点整理-Vue CLI
Vue CLI 是一个基于 Vue.js 进行项目快速开发的脚手架 注:具体安装步骤可参考Vue CLI,默认安装的脚手架,是没有service.util等工具类的,以下主要描述如何在脚手架的基础上进 ...
- Vue技术点整理-Vue CLI安装详解
一,脚手架安装 Node 版本要求 Vue CLI 需要 Node.js +).你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本. 1,全局安装Vue CLI ...
- Vue技术点整理-vue.config.js
1,proxy代理解决本地开发环境跨域问题 配置proxy代理后,proxy会将任何未知请求 (没有匹配到静态文件的请求) 代理到 https://192.168.3.49:8080 vue.conf ...
- Vue技术点整理-前言
前言 Vue版本说明:本文档编写时,Vue稳定版本为 2.6.10 本文档编写目的为:整理Vue相关生态的技术点.和开发中经常使用到的技术点,让开发者快速上手开发,提升开发效率 一,Vue开发工具:本 ...
- Vue技术点整理-安装引入
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架 所谓渐进式是指: 1,如果你有一个现成的web应用,你可以将vue作为该应用的一部分嵌入其中,带来更丰富的交互体验 ...
- Vue技术点整理-Vuex
什么是Vuex? 1,Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化 2,每一个 Vuex ...
- Vue技术点整理 vue-devtools
注:默认浏览器调试工具,在调试vue的页面时,是不能看到vue项目的属性状态值的,所以最好是在浏览器上安装 vue-devtools,这样就可以在浏览器里面审查和调试vue的应用了 1,Chrome浏 ...
- Vue技术点整理-指令
我们通常给一个元素添加 v-if / v-show 来做权限管理,但如果判断条件繁琐且多个地方需要判断,这种方式的代码不仅不优雅而且冗余. 针对这种情况,我们可以通过全局自定义指令来处理:我们先在新建 ...
- php开发面试题---jquery和vue对比（整理）
php开发面试题---jquery和vue对比(整理) 一.总结 一句话总结: jquery的本质是更方便的选取和操作DOM对象,vue的本质是数据和页面分离 反思的回顾非常有用,因为决定了我的方向和 ...
随机推荐
- node 后台管理插件forever
在一台计算机上手动跑Node项目简单,node xx.js就搞定了,想让Node项目后台运行,虽然不能直接用node命令搞定,但是在安装了forever这个包以后,还是很轻松的.不过要是在远程服务器上 ...
- String,CString,TCHAR,char之间区别和联系
char是类型TCHAR也是!不过他可以通过是否定义了UNICODE宏来判断到底是char还是w_char; TCHAR是一种字符串类型,它让你在以MBCS和UNNICODE来build程序时可以使用 ...
- delphi中使用词霸2005的动态库XdictGrb.dll实现屏幕取词
近日来,在网上发现关于屏幕取词技术的捷径,搜索很长时间,发现实现方式以VB出现的居多,但是通过Delphi来实现的却好象没有看到,自己参考着VB的相关代码琢磨了一下通过delphi来实现的方式. 其实 ...
- DSP Builder 12.0安装及crack方法
在安装dsp_builder之前请确保已安装所需要的matlab版本 在此之前我已经安装了matlab R2011a,下面安装dsp builder 下面就是破解了,因为12.0的版本刚出,还没有相应 ...
- Lua中的协同程序 coroutine（转）
Lua中的协程和多线程很相似,每一个协程有自己的堆栈,自己的局部变量,可以通过yield-resume实现在协程间的切换.不同之处是:Lua协程是非抢占式的多线程,必须手动在不同的协程间切换,且同一时 ...
- Unicode 7.0.1中文支持非常好
简单测试了一下,7.0.1中文支持非常好.Delphi7下将UniConnection的useUnicode设置为False,Tokyo下设置为True,Charset空着即可. 问题要点:1.建数据 ...
- MacOS X编译OpenSceneGraph
本文主要记录在MacOS X上编译OpenSceneGraph,方便日后查阅.所使用的环境如下: MacOS X 10.10 Yosemite XCode 6.3.2 CMake 3.3.0 Open ...
- DIOCP3 DEMO的编译（去掉VCL前缀）
总有些朋友问我,关于DEMO编译的一些问题,每次都回答大概都差不多,我想还是写篇说明书给大家,关于DEMO编译的步骤. [环境设定] 1.将DIOCP3\source路径添加到Delphi的搜索路径, ...
- 事务 ( 进程 ID 60) 与另一个进程被死锁在锁资源上，并且已被选作死锁牺牲品
Select * FROM [TableName] With(NoLock) .....
- SYN2306B型 GPS北斗双模授时板
SYN2306B型 GPS北斗双模授时板 产品概述 SYN2306B型GPS北斗双模授时板是由西安同步电子科技有限公司精心设计.自行研发生产的一款双模授时板卡,接收北斗或者GPS北斗混合授时卫星信号, ...