文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

使用Vue-router和出现空白页以及路由对象属性的示例分析

2024-04-02 19:55

关注

这篇文章主要介绍使用Vue-router和出现空白页以及路由对象属性的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

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
  }
  ]
 }
 ]
})

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和出现空白页以及路由对象属性的示例分析”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯