Vue2项目配置vue-router

1. 首先删除初始化项目默认的组件“HelloWorld.vue”

2. 在App.vue文件的根div下，防止一个路由占位符router-view，用来进行表示不同的页面。

<router-view style="height: 100%"></router-view>

3. 在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>

4. 在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>

5. 在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"
})

6. 在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')

7. 演示

在浏览器输入运行后链接，直接跳转至如下路由，此时在SignPage页下的LoginBlock组件下。

点击注册按钮，跳转至SignPage页下的RegistBlock组件下。

点击注册组件中的“登陆组件”，跳转回SignPage页下的LoginBlock组件下。

点击登录组件下的“登录”按钮，模拟登陆成功后的登录的页面跳转，跳转至HomePage页面下

页面跳转使用的方法为：

this.$router.push('......');

以上就是路由的引入与基本使用方法。