Vue-router的使用和出现空白页,路由对象属性详解
Vue-router的使用和出现空白页
2018.08.28更新
vue-router:前端路由系统——改变视图的同时不会向后端发出请求
1、hash
2、history
2018.06.25更新
get到一个新技能
importVuefrom'vue' importRouterfrom'vue-router' importapifrom'../lib/service'//接口文档 Vue.use(Router) constrouter={ mode:'history', routes:[{ chunkName:'src/pages/index', name:'index', path:'/', beforeEnter:async(to,from,next)=>{ awaitapi.login().then((res)=>{ console.log(res) next() }).catch((rej)=>{ console.log('error') console.log(rej) next() }) }, component:()=>import('../../src/pages/index.vue') }] } exportdefaultnewRouter(router)
beforeEnter:在加载路由时可以做一些事情,上面的代码执行的是,在加载之前调用登陆接口
20185.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
importVueResourcefrom'vue-resource' importIndexfrom'./pages/index' importContentfrom'./pages/content' importrouterfrom'./router' importRouterfrom'vue-router' Vue.config.productionTip=false Vue.use(Router) Vue.use(VueResource) letrouters=newRouter({ mode:'history', routes:[ { path:'/', component:Content, children:[ { path:'/content', component:Content } ] } ] }) /*eslint-disableno-new*/ newVue({ el:'#app', routers, template:'', components:{Index} })
index.vue
- 首页
- 技术文档
- 留言
- 关于我