Vue 单页内使用router-link跳转,动态使用router.push()实现页内跳转，跳转到其他组件

一、配置router中的router.js(使用npm命令创建的项目：router文件夹中是index.js)，配置（路由）如下：import App from '../App'export default [{path: '/',component: App, //顶层路由，对应index.htmlchildren: [ //二级路由。对应App.vue//页...

风正吹

30192人浏览 · 2018-07-02 14:44:54

风正吹 · 2018-07-02 14:44:54 发布

一、配置router中的router.js(使用npm命令创建的项目：router文件夹中是index.js)，配置（路由）如下：

import App from '../App'

export default [{
  path: '/',
  component: App, //顶层路由，对应index.html
  children: [ //二级路由。对应App.vue
    //页面为空的时候默认跳转到登录页
    {
      path: '',
      component: r => require.ensure([], () => r(require('../page/login')), 'login')
    },
    {
      path: 'register',
      component: r => require.ensure([], () => r(require('../page/register')), 'register')
    },
    {
      path: 'findpwd',
      component: r => require.ensure([], () => r(require('../page/findpwd')), 'register')
    },
    {
      path: 'home',
      component: r => require.ensure([], () => r(require('../page/home')), 'home')
    }],
}]

二、使用实现页内跳转（直接使用path跳转）

<router-link :to="{path:'register'}" style="font-size: 14px;color: orange;">立即注册</router-link>

其他：
①我main.js文件代码如下：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './router/index.js'
import store from './store'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import './config/rem'

import header from './page/header.vue'
import footer from './page/footer.vue'

Vue.config.productionTip = false

Vue.component('header-vue', header)
Vue.component('footer-vue', footer)

Vue.use(VueRouter)
Vue.use(ElementUI)
const router = new VueRouter({
  routes
})
new Vue({
  router,
  store,
}).$mount('#app')

②App.vue代码如下：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
  export default {

  }
</script>

<style>

</style>

③index.html代码如下

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>测试项目</title>
</head>
<body>
<div id="app">
  <router-view></router-view>
</div>
</body>
</html>

项目结构如下：
这里写图片描述

三、使用router.push()实现页内跳转，跳转到其他页面
1.先看router.js的配置

import App from '../App'

const register = r => require.ensure([], () => r(require('../components/register')), 'register');
const findpwd = r => require.ensure([], () => r(require('../components/findpwd')), 'findpwd');
const login = r => require.ensure([], () => r(require('../components/login')), 'login');
const home = r => require.ensure([], () => r(require('../components/home/home')), 'home');
const userInfo = r => require.ensure([], () => r(require('../components/home/UserInfo')), 'userInfo');
const homeService = r => require.ensure([], () => r(require('../components/home/ServicePage')), 'homeService');
const homeDefault = r => require.ensure([], () => r(require('../components/home/HomeDefault')), 'homeDefault');
const homeLeft = r => require.ensure([], () => r(require('../components/home/HomeLeft')), 'homeLeft');
const userInfoLeft = r => require.ensure([], () => r(require('../components/home/UserInfoLeft')), 'userInfoLeft');
const userClockInfo = r => require.ensure([], () => r(require('../components/home/userinfo/UserClockInfo')), 'userClockInfo');
const userCompanyInfo = r => require.ensure([], () => r(require('../components/home/userinfo/UserCompanyInfo')), 'userCompanyInfo');
const userWOs = r => require.ensure([], () => r(require('../components/home/userinfo/UserWOs')), 'userWOs');

export default [{
  path: '/',
  component: App, //顶层路由，对应index.html
  children: [ //二级路由。对应App.vue
    //页面为空的时候默认跳转到登录页
    {
      path: '',
      component: login
    }, {
      path: '/',
      redirect: App
    },
    {
      path: 'register',
      component: register
    },
    {
      path: 'findpwd',
      component: findpwd
    },
    {
      path: 'home',
      component: home
    },
    {
      path: '/home',
      // 你也可以在顶级路由就配置命名视图
      component: home,//加载到最外层的router-view
      children: [{//home子页面--用户信息
        path: 'home_user_userinfo',
        components: {
          left_router: userInfoLeft,//加载到内层router-view name=left_router
          right_router: userInfo,//加载到内层router-view name=right_router
        }
      },
        {//home子组件--公司信息
          path: 'home_user_companyinfo',
          components: {
            left_router: userInfoLeft,
            right_router: userCompanyInfo,
          }
        },
        {//home子组件--工单信息
          path: 'home_user_wos',
          components: {
            left_router: userInfoLeft,
            right_router: userWOs,
          }
        },
        {//home子组件--打卡信息
          path: 'home_user_clockInfo',
          components: {
            left_router: userInfoLeft,
            right_router: userClockInfo,
          }
        },
        {//home子组件--服务页【TAB】
          path: 'home_service',
          components: {
            left_router: homeLeft,
            right_router: homeService,
          }
        },
        {//home子组件--默认页【TAB】
          path: 'home_default',
          components: {
            left_router: homeLeft,
            right_router: homeDefault,
          }
        }
      ]
    },
  ],
}]

2.看下home.vue代码如下

<template>
  <div>
    <header-vue v-bind:userInfo='userInfo'></header-vue>
    <div id="bodybox" style="display:flex;flex-direction: column;">
      <div>
        <ul id="firstlist">
          <li>
            <router-link :to="{path:'/home/home_default'}" replace><span class="homespan def">首页</span></router-link><!-- 页内跳转 -->
          </li>
          <li>
            <router-link :to="{path:'/home/home_service'}" replace><span class="homespan ser">服务</span></router-link><!-- 页内跳转 -->
          </li>
          <li>
            <router-link :to="{path:'/home/home_user_userinfo'}" replace><span class="homespan per">个人</span>
            </router-link>
          </li>
        </ul>
      </div>
      <div style="width: 100%;background: lightgray;height: 1px;margin-top: 2px "></div>
      <div style="display: flex;flex-direction: row;">
        <div id="left" style="width: 220px;height: auto">
          <router-view class="leftRV" name="left_router"></router-view><!--子组件加载到--内层router-view-->
        </div>
        <div v-bind:style="hlineStyle"></div>
        <div id="right" style="width: 100%;height: auto;">
          <router-view class="rightRV" name="right_router"></router-view><!--子组件加载到--内层router-view-->
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import httpUtil from '../../http/httpRequestUtil'
  import store from '../../store/index'

  export default {
    name: "home",
    data() {
      return {
        userInfo: {},
        hlineStyle: {
          borderLeftColor: '#D3D3D3',
          borderLeftWidth: '1px',
          borderLeftStyle: 'solid',
          height: (document.documentElement.clientHeight - 95) + 'px',
        }
      }
    },
    created: function () {
      document.title = "欢迎来到你的世界";
      document.body.style.backgroundImage = "url(" + require("../../assets/home_bg.jpg") + ")";
      document.body.style.backgroundSize = 'cover';//背景覆盖全部
      document.body.style.backgroundAttachment = 'fixed';//背景图像固定
      document.body.style.backgroundRepeat = 'no-repeat';//背景不复制（平铺）
      document.body.style.backgroundPosition = 'center';//背景居中
    },
    methods: {}
  }
</script>

<style scoped>
  #firstlist {
    display: block;
    list-style: none;
  }

  li {
    color: white;
    float: left;
    position: relative;
    margin-left: 1px;
    width: 80px;
    height: 30px;
    border: 1px deepskyblue solid;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  .homespan {
    color: #ffffff;
  }

  a {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
  }

  a:link {
    color: white;
    text-decoration: none;
  }

  a:active {
    color: red;
  }

  a:hover {
    background: powderblue;
  }
</style>

3.使用js动态跳转到其他页面，使用router.push()跳转【紧展示了代码片段】

import store from '../store'
...
methods: {
      submit: function () {//提交登录
        var router = this.$router//赋值使用
        if (this.pwd.length == 0 && this.account.length == 0) {
          this.account = "13541354186"
          this.pwd = "00000000"
        }
        var pwd_sha1 = hex_sha1(this.pwd)

        var params = new URLSearchParams();
        params.append('username', this.account);
        params.append('password', pwd_sha1);
        params.append('type', '2');
        //这里用axios原生的去请求
        httpUtil.postData('api-login/login', params, function (data, message) {
          if (data != null) {
            store.commit("setUserUuid", data)
            var url = "api-common/user/getUserInfo";
            httpUtil.getData(url, function (userInfo, message) {
              if (userInfo != null) {
                console.log(userInfo)
                store.commit("setUserInfo", userInfo);
                router.push({path: '/home/home_default'})//页面跳转--加入history【使用router.replace()不加入history】
              }
            })
          }
        })
      }
    }

4.展示效果：
这里写图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^