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