Vue在webpack下的路由设置

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');
      }
    }
  }

猜你喜欢

转载自my.oschina.net/u/3648322/blog/1811721