Vue Router 跳转页面

使用之前需要使用命令行在工程目录中集成Router,有很多文章介绍使用,这里简单使用

配置路由

//导包
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
//导入需要跳转页面(组件)
import homepage from '../pages/home.vue'
import loginpage from '../pages/login.vue'

/*配置路由*/
const routes=[
    {
    path:"/home",
    name:'home',
    component:homepage,
    },
    
    {
    path:"/login",
    name:'login',
    component:loginpage,
    }   
]

/*实例化路由*/
const router = new Router({
  routes : routes 
})
/*导出路由模块*/
export default router

注册main.js

import Vue from 'vue'
import App from './App.vue'
//1.导入路由
import router from './router/index.js'
import log from './common/common.js'
Vue.prototype.$log = log
import Api from './api/index.js';
Vue.prototype.$api = Api;

Vue.config.productionTip = false

new Vue({
    //2.挂载路由
    router, 
    render: h => h(App),
}).$mount('#app')

使用

login:function(){
            this.$router.push({name:'home'});
            }

你可能感兴趣的:(Vue Router 跳转页面)