Vue在webpack下的路由设置

一、在webpack（vue-cli）建立的时候选啦router的配置（在以前有一篇写了环境配置）；在文件夹router下有index.js文件

二、先经过import引入把路由对应的组件引入；而后修改routes：[ ]  中的对应path（对应路径，一级路由前加“/”）和component（上面引入的组件的名称）内容：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '../components/Login' //引入路由对应的组件
import Master from '../components/Master'

Vue.use(Router)

export default new Router({
  mode:'history', 
//经过mode修改为history，能够使得访问路径看上去和普通的同样，如http://localhost:8080/Login/
  routes: [
    {
      path: '/Login',
      component: Login,
    },
    {
      path: '/Master',
      component: Master,
    },
  ]
})

 

三、在组件里，如Login组件内，能够经过路由的重定向方法实现上面index.js中定义路由的跳转；

如在Login组件中有个going方法是输入正确的用户名密码后，执行跳转到Master页：

methods: {
    going: function() {
      //if判断输入的用户名密码是否正确
      if(this.value_user=='admin'&&this.value_pwd=='123456'){
        //经过this.$router.push实现指定路由跳转
        this.$router.push('/Master');
      }
    }
  }