Vue-router的使用和出现空白页
2018.08.28 更新
vue-router:
前端路由系统——改变视图的同时不会向后端发出请求1、 hash
2、history
2018.06.25 更新
get到一个新技能
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 更新
可以带参数传路由,有兴趣的小伙伴可以试试
这个方法是我经常用的
query: {
key: 'value'
}
})
两种设计模式
history/hash
还有一些别的我记录的方法
$route.path
$route.params
$route.query
$route.hash
$route.matched //路由记录
$route.name
$route.fullPath //包含查询参数和hash完整路径
route.go(num)
//原来写的
自己之前跟着vue教学视频跟着老师一起打代码,现在为了配合课程设计准备自己写个vue项目,刚开始就在vue-router上遇到了小坎坷,就想分享一下
放上代码
main.js
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.vue
content.vue
这样写下来,没报错,可是运行以后就是空白页
之前是因为生成项目时,我就直接用了router,为了不冲突自己生成的router,我自己改了名称routers, 后来考虑到是不是import router from './router'这个不起作用,就删掉了,自己cnpm vue-router。但是还是没有用。
后来把routers改了, 把这个routers改成router,页面就出现了。
当然下面的routers也改了。
vue-router的使用流程:
使用
完毕
然后有几点注意事项,以下几点都是我碰到出现了空白页的情况,po出来可能会有点帮助:
routes:不是routers
let router = new Router({}) 不要乱起名字 //虽然我现在还不知道为什么,有大神可以赐教一下嘛
不要忘记挂载在new Vue({})里面
子路由的路径前面不要加‘/'
以上这篇Vue-router的使用和出现空白页,路由对象属性详解就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持编程之家。