-
首先删除初始化项目默认的组件“HelloWorld.vue”
-
在App.vue文件的根div下,防止一个路由占位符router-view,用来进行表示不同的页面。
<router-view style="height: 100%"></router-view>
- 在src文件夹下新建文件夹pages,并在该文件夹下创建两个vue组件,分别命名为:SignPage.vue与Home.vue
两page组件的代码如下
- SignPage.vue
注册/登录页面中放一个路由占位符,用来进行注册/登录组件块的转换。
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: "SignPage"
}
</script>
<style scoped>
</style>
- HomePage.vue
<template>
<div>
主页
</div>
</template>
<script>
export default {
name: "HomePage"
}
</script>
<style scoped>
</style>
- 在compoments文件夹下建立两个vue组件,LoginBlock.vue与RegistBlock.vue。
- LoginBlock.vue
<template>
<div>
登录组件
<el-button @click="to_register">注册</el-button>
<el-button @click="do_login">登录</el-button>
</div>
</template>
<script>
export default {
name: "LoginBlock",
data(){
return {
}
},
methods:{
to_register(){
this.$router.push('/sign/register');
},
do_login(){
this.$router.push('/home');
}
}
}
</script>
<style scoped>
</style>
- RegistBlock.vue
<template>
<div>
注册组件
<el-button @click="to_login">登录组件</el-button>
</div>
</template>
<script>
export default {
name: "RegistBlock",
data(){
return {
}
},
methods:{
to_login(){
this.$router.push('/sign/login');
}
}
}
</script>
<style scoped>
</style>
- 在src下创建router.js文件,用来存放路由跳转的信息。可以把这个文件看成是一个路由跳转的目录。
- router.js
import Vue from 'vue'
import Router from 'vue-router'
import SignPage from "@/pages/SignPage";
import HomePage from "@/pages/HomePage";
import LoginBlock from "@/components/LoginBlock";
import RegistBlock from "@/components/RegistBlock";
Vue.use(Router)
//获取原型对象上的push函数
const originalPush = Router.prototype.push
//修改原型对象中的push方法
Router.prototype.push = function push(location) {
return originalPush.call(this, location).catch(err => err)
}
export default new Router({
routes:[
{path:'/',redirect:'/sign'},
{path:'/sign',
component: SignPage,
children:[
{path:'/sign/login',component:LoginBlock},
{path:'/sign/register',component:RegistBlock}
],
redirect:'/sign/login'
},
{
path:'/home',
component: HomePage
}
],
mode:"hash"
})
- 在assets下新建文件夹css,并在css文件夹下新建文件global.css
- global.css
/*全局样式表*/
html,body,#app{
height: 100%;
margin: 0;
padding: 0;
}
main.js文件中引入全局样式
import './assets/css/global.css'
- main.js
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import router from './router'
import './assets/css/global.css'
Vue.config.productionTip = false
Vue.use(ElementUI)
new Vue({
router,
render: h => h(App),
}).$mount('#app')
- 演示
在浏览器输入运行后链接,直接跳转至如下路由,此时在SignPage页下的LoginBlock组件下。
点击注册按钮,跳转至SignPage页下的RegistBlock组件下。
点击注册组件中的“登陆组件”,跳转回SignPage页下的LoginBlock组件下。
点击登录组件下的“登录”按钮,模拟登陆成功后的登录的页面跳转,跳转至HomePage页面下
页面跳转使用的方法为:
this.$router.push('......');
以上就是路由的引入与基本使用方法。