Vue-router的使用和出现空白页,路由对象属性详解


Posted in Javascript onSeptember 03, 2018

Vue-router的使用和出现空白页

2018.08.28 更新

vue-router:前端路由系统——改变视图的同时不会向后端发出请求

1、 hash

2、history

2018.06.25 更新

get到一个新技能

import Vue from 'vue'
import Router from 'vue-router'
import api from '../lib/service' //接口文档

Vue.use(Router)
const router = {
 mode: 'history',
 routes: [{
 chunkName: 'src/pages/index',
 name: 'index',
 path: '/',
 beforeEnter: async (to, from, next) => {
  await api.login().then((res) => {
  console.log(res)
  next()
  }).catch((rej) => {
  console.log('error')
  console.log(rej)
  next()
  })
 },
 component: () => import('../../src/pages/index.vue')
 }]
}

export default new Router(router)

beforeEnter:在加载路由时可以做一些事情,上面的代码执行的是,在加载之前调用登陆接口

2018 5.5 更新

空白页还有一种情况,页面中数据使用的错误,会导致空白页

可以带参数传路由,有兴趣的小伙伴可以试试

这个方法是我经常用的

this.$route.push({

 path: '路径',
 query: {
   key: 'value'
 }

})

跳转至另一个页面时,这样获取传的参数

this.$route.query.key

两种设计模式

history/hash

还有一些别的我记录的方法

$route.path

$route.params

$route.query

$route.hash

$route.matched //路由记录

$route.name

$route.fullPath //包含查询参数和hash完整路径

route.go(num)

router-link :to=”path”

//原来写的

自己之前跟着vue教学视频跟着老师一起打代码,现在为了配合课程设计准备自己写个vue项目,刚开始就在vue-router上遇到了小坎坷,就想分享一下

放上代码

main.js

import VueResource from 'vue-resource'
import Index from './pages/index'
import Content from './pages/content'
import router from './router'
import Router from 'vue-router'

Vue.config.productionTip = false

Vue.use(Router)

Vue.use(VueResource)

let routers = new Router({
 mode: 'history',
 routes: [
 {
  path: '/',
  component: Content,
  children: [
  {
   path: '/content',
   component: Content
  }
  ]
 }
 ]
})
/* eslint-disable no-new */
new Vue({
 el: '#app',
 routers,
 template: '<Index/>',
 components: { Index }
})

index.vue

<template>
 <div id="app" class="wrapper">
  <div class="nav">
   <ul>
    <li>首页</li>
    <li>技术文档</li>
    <li>留言</li>
    <li>关于我</li>
   </ul>
  </div>
  <div class="content">
    <router-view></router-view>
  </div>
  <div class="footer">
   @dwf
  </div>
 </div>


</template>

<script>
</script>

<style>
</style>

content.vue

<template>
 <div>
  1111
 </div>
</template>

<script>
</script>

<style>
</style>

这样写下来,没报错,可是运行以后就是空白页

之前是因为生成项目时,我就直接用了router,为了不冲突自己生成的router,我自己改了名称routers, 后来考虑到是不是import router from './router'这个不起作用,就删掉了,自己cnpm vue-router。但是还是没有用。

后来把routers改了, 把这个routers改成router,页面就出现了。

let routers = new Router({

当然下面的routers也改了。

vue-router的使用流程:

cnpm install vue-router ?save;
import Router from vue-router;
Vue.use(Router);
let router = new Router({ 
routes: [//路由路径] 
});
new Vue({ router })

使用

完毕

然后有几点注意事项,以下几点都是我碰到出现了空白页的情况,po出来可能会有点帮助:

routes:不是routers

let router = new Router({}) 不要乱起名字 //虽然我现在还不知道为什么,有大神可以赐教一下嘛

不要忘记挂载在new Vue({})里面

子路由的路径前面不要加‘/'

let router = new VueRouter({ 
mode: 'history', 
routes: [ 
{ 
path: '/', 
component: IndexPage 
}, 
{ 
path: '/orderList', 
component: OrderListPage 
}, 
{ 
path: '/detail', 
component: DetailPage, 
redirect: '/detail/count', 
children: [ 
{ 
path: 'analysis', 
component: DetailAnaPage 
} 
] 
} 
] 
})

以上这篇Vue-router的使用和出现空白页,路由对象属性详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Input 特殊事件onpopertychange和oninput
Jun 17 Javascript
IE 上下滚动展示模仿Marquee机制
Dec 20 Javascript
Javascript基础教程之比较操作符
Jan 18 Javascript
JS随机洗牌算法之数组随机排序
Mar 23 Javascript
分享一个插件实现水珠自动下落效果
Jun 01 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 Javascript
vue综合组件间的通信详解
Nov 06 Javascript
js实现上传并压缩图片效果
Jan 10 Javascript
webpack vue项目开发环境局域网访问方法
Mar 20 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
javascript实现前端分页效果
Jun 24 Javascript
js实现简单的点名器随机色实例代码
Sep 20 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
Sep 03 #Javascript
JavaScript日期工具类DateUtils定义与用法示例
Sep 03 #Javascript
Angular5中状态管理的实现
Sep 03 #Javascript
JavaScript创建对象方法实例小结
Sep 03 #Javascript
vue自定义底部导航栏Tabbar的实现代码
Sep 03 #Javascript
解决vue单页路由跳转后scrollTop的问题
Sep 03 #Javascript
webpack4 SCSS提取和懒加载的示例
Sep 03 #Javascript
You might like
php cookie 登录验证示例代码
2009/03/16 PHP
使用PHP遍历文件目录与清除目录中文件的实现详解
2013/06/24 PHP
解析PHP正则提取或替换img标记属性
2013/06/26 PHP
php PDO异常处理详解
2016/11/20 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
自制PHP框架之设计模式
2017/05/07 PHP
用js计算页面执行时间的函数
2006/12/07 Javascript
JS中字符问题(二进制/十进制/十六进制及ASCII码之间的转换)
2008/11/03 Javascript
JS特权方法定义作用以及与公有方法的区别
2013/03/18 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
jQuery模拟点击A标记示例参考
2014/04/17 Javascript
javascript的理解及经典案例分析
2016/05/20 Javascript
关于Jquery中的bind(),on()绑定事件方式总结
2016/10/26 Javascript
基于JavaScript实现无限加载瀑布流
2017/07/21 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
JavaScript对象属性操作实例解析
2020/02/04 Javascript
[04:02]2014DOTA2国际邀请赛 BBC每日综述中国战队将再度登顶
2014/07/21 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
简单了解python模块概念
2018/01/11 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
解决webdriver.Chrome()报错:Message:'chromedriver' executable needs to be in Path
2019/06/12 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python关于调用函数外的变量实例
2019/12/26 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
物业管理个人自我评价
2013/11/08 职场文书
高中班长自我鉴定
2013/12/20 职场文书
安全生产实施方案
2014/02/23 职场文书
实习协议书
2015/01/27 职场文书
background-position百分比原理详解
2021/05/08 HTML / CSS
SQLServer 错误: 15404,无法获取有关 Windows NT 组/用户 WIN-8IVSNAQS8T7\Administrator 的信息
2021/06/30 SQL Server