Vue在webpack下的路由设置

2019独角兽企业重金招聘Python工程师标准>>>

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

2、先通过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,
    },
  ]
})

 

3、在组件里，如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');
      }
    }
  }

 

转载于:https://my.oschina.net/u/3648322/blog/1811721