Vue-router usage and blank page appearance
Updated 2018.08.28
vue-router：Front-end routing system - no requests are made to the back-end while changing the view
1、 hash
2、history
Updated 2018.06.25
Get to a new skill
import Vue from 'vue'
import Router from 'vue-router'
import api from '../lib/service' //Interface Documentation
(Router)
const router = {
mode: 'history',
routes: [{
chunkName: 'src/pages/index',
name: 'index',
path: '/',
beforeEnter: async (to, from, next) => {
await ().then((res) => {
(res)
next()
}).catch((rej) => {
('error')
(rej)
next()
})
},
component: () => import('../../src/pages/')
}]
}
export default new Router(router)
beforeEnter: Some things can be done when loading the route. The above code executes, calling the login interface before loading
2018 5.5 Update
There is another situation in which the data used in the page is used incorrectly, which will cause the blank page.
You can pass routes with parameters. Interested friends can try it
This method is what I often use
this.$({
path: 'path'，
query: {
key: 'value'
}
})
When jumping to another page, get the passed parameters
this.$
Two design modes
history/hash
There are some other methods I have recorded
$
$
$
$
$ //Routing record
$
$ //Includes query parameters and hash full path
(num)
router-link :to=”path”
//It was written
I used to follow the vue teaching video and type code with the teacher. Now, in order to cooperate with the course design, I planned to write a vue project myself. At the beginning, I encountered a small bump on vue-router, so I wanted to share it.
Put the code on it
import VueResource from 'vue-resource'
import Index from './pages/index'
import Content from './pages/content'
import router from './router'
import Router from 'vue-router'
= false
(Router)
(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 }
})
<template>
<div class="wrapper">
<div class="nav">
<ul>
<li>front page</li>
<li>Technical Documentation</li>
<li>message</li>
<li>About me</li>
</ul>
</div>
<div class="content">
<router-view></router-view>
</div>
<div class="footer">
@dwf
</div>
</div>
</template>
<script>
</script>
<style>
</style>
<template> <div> 1111 </div> </template> <script> </script> <style> </style>
Written this way, there is no error, but it will be a blank page after running.
Before, when I generated the project, I directly used the router. In order not to conflict with the routers I generated, I changed the name routers myself. Later, I considered whether the import router from './router' did not work, so I deleted it and cnpm vue-router. But it's still useless.
Later, I changed the routers and changed the routers to routers, and the page appeared.
let routers = new Router({
Of course, the following routers have also been changed.
The usage process of vue-router:
cnpm install vue-router –save；
import Router from vue-router;
(Router);
let router = new Router({
routes: [//Route path]});
new Vue({ router })
use
complete
Then there are a few things to note. The following are all things I encountered when a blank page appears. It may be helpful to post it out:
routes: not routers
let router = new Router({}) Don't name it randomly // Although I don't know why now, I can give you some advice
Don't forget to mount it in new Vue({})
Do not add '/' in front of the path of the subroutine
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
}
]
}
]
})
The above article on the use of Vue-router and the blank pages, and detailed explanation of the routing object properties are all the content I share with you. I hope you can give you a reference and I hope you can support me more.