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