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

发布于 2019-11-02 作者 风铃 370次 浏览 版块 前端

这篇文章主要为大家详细介绍了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
      }
      ]
     }
     ]
    })
    /* 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 
    } 
    ] 
    } 
    ] 
    })
    
收藏
暂无回复