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 相关文章推荐
JavaScript 特殊字符
Apr 05 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
jquery 层次选择器siblings与nextAll的区别介绍
Aug 02 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
Jul 07 Javascript
EasyUI创建对话框的两种方式
Aug 23 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
vue代理和跨域问题的解决
Jul 18 Javascript
vue操作动画的记录animate.css实例代码
Apr 26 Javascript
vue el-table实现自定义表头
Dec 11 Javascript
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
Vue+axios封装请求实现前后端分离
Oct 23 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(8) php 数组
2010/03/05 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
带你了解PHP7 性能翻倍的关键
2015/11/19 PHP
PHP中Enum(枚举)用法实例详解
2015/12/07 PHP
WordPress开发中用于标题显示的相关函数使用解析
2016/01/07 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
Jquery 学习笔记(一)
2009/10/13 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
JS简单实现登陆验证附效果图
2013/11/19 Javascript
jQuery使用$.get()方法从服务器文件载入数据实例
2015/03/25 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
JS无限级导航菜单实现方法
2019/01/05 Javascript
vue2.0实现的tab标签切换效果(内容可自定义)示例
2019/02/11 Javascript
浅谈js闭包理解
2019/03/28 Javascript
微信小程序实现获取小程序码和二维码java接口开发
2019/03/29 Javascript
JavaScript实现美化滑块效果
2019/05/17 Javascript
微信小程序如何自定义table组件
2019/06/29 Javascript
Node.js中的异步生成器与异步迭代详解
2021/01/31 Javascript
Python通过RabbitMQ服务器实现交换机功能的实例教程
2016/06/29 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
Django中Model的使用方法教程
2018/03/07 Python
python字符串与url编码的转换实例
2018/05/10 Python
Python实现查询某个目录下修改时间最新的文件示例
2018/08/29 Python
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
函授毕业生自我鉴定
2013/11/06 职场文书
元旦红领巾广播稿
2014/02/19 职场文书
《大江保卫战》教学反思
2014/04/11 职场文书
工程售后服务承诺书
2014/05/21 职场文书
2014年社区党建工作汇报材料
2014/11/02 职场文书
领导干部失职检讨书
2015/05/05 职场文书
英语读书笔记
2015/07/02 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书