Vue itself is oriented to a single page, but in many cases the main function is placed in main.vue. For login, router can be considered at this time. Router provides the possibility of switching multiple pages under the Vue framework.
basic configuration:
App.view
<template>
<div id="App">
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
created (){
//默认切换到登录页
this.$router.push('./login')
}
}
</script>
The route renders the corresponding node to the router-view node
main.js
new Vue({
store,
el: '#app',
router,
components: { App },
template: '<App/>',
})
main.js goes into router.js file
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Main from '../components/main/Main.vue'
import Login from '../components/login/Login.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/main',
name: 'Main',
component: Main
},
{
path: '/login',
name: 'Login',
component: Login
},
]
})
Just register the vue file and title corresponding to the route
usage:
this.$router.push('./login')
fairly simple configuration