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 相关文章推荐
模拟一个类似百度google的模糊搜索下拉列表
Apr 15 Javascript
js+HTML5实现视频截图的方法
Jun 16 Javascript
jQuery 监控键盘一段时间没输入
Apr 22 Javascript
JavaScript无阻塞加载和defer、async详解
Feb 26 Javascript
vue 怎么创建组件及组件使用方法
Jul 27 Javascript
微信小程序开发之路由切换页面重定向问题
Sep 18 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
Dec 17 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
Jan 11 jQuery
Vue数字输入框组件使用方法详解
Feb 10 Javascript
js实现随机抽奖
Mar 19 Javascript
JS + HTML 罗盘式时钟的实现
May 21 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
不重新编译PHP为php增加openssl模块的方法
2011/06/14 PHP
PHP中PDO基础教程 入门级
2011/09/04 PHP
详解PHP中mb_strpos的使用
2018/02/04 PHP
用php定义一个数组最简单的方法
2019/10/04 PHP
ThinkPHP5 框架引入 Go AOP,PHP AOP编程项目详解
2020/05/12 PHP
Nigma vs AM BO3 第一场2.13
2021/03/10 DOTA
IE浏览器PNG图片透明效果代码
2008/09/02 Javascript
js向上无缝滚动,网站公告效果 具体代码
2013/11/18 Javascript
javascript中的作用域和上下文使用简要概述
2013/12/05 Javascript
Jquery 过滤器(first,last,not,even,odd)的使用
2014/01/22 Javascript
jquery制作图片时钟特效
2020/03/30 Javascript
原生js实现图片轮播特效
2015/12/18 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
smartupload实现文件上传时获取表单数据(推荐)
2016/12/12 Javascript
简单实现JS计算器功能
2016/12/21 Javascript
jQuery点击导航栏选中更换样式的实现代码
2017/01/23 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
Nodejs--post的公式详解
2017/04/29 NodeJs
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
Openlayers实现图形绘制
2020/09/28 Javascript
python实现忽略大小写对字符串列表排序的方法
2014/09/25 Python
python 实现自动远程登陆scp文件实例代码
2017/03/13 Python
Python+PyQt5实现美剧爬虫可视工具的方法
2019/04/25 Python
德国足球商店:OUTFITTER
2019/05/06 全球购物
酒店拾金不昧表扬信
2014/01/18 职场文书
学生不讲诚信检讨书
2014/09/29 职场文书
2014年骨干教师工作总结
2014/12/19 职场文书
升职自荐信怎么写
2015/03/05 职场文书
js基础语法与maven项目配置教程案例
2021/07/15 Javascript
JavaScript实现两个数组的交集
2022/03/25 Javascript
vue实现列表垂直无缝滚动
2022/04/08 Vue.js
nginx静态资源的服务器配置方法
2022/07/07 Servers