本文是不同的路由跳转对比说明,自己的理解之路,如有理解错误,望各位提点一二!!!!!
一、配置router中的index.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>
1.对应的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')
2.App.vue 代码如下:
<template>
<div>
<router-view></router-view>
</div>
</template>
3.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()实现页内跳转,跳转到其他页面路由配置如下:
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: home
},
{
path: '/home',
name: 'home',
component: home
},
{
path: '/page01',
name: 'page01',
component: page01,
children: [
{
path: 'page01-a',
name: 'page01A',
component: page01A
},
{
path: 'page01-b',
name: 'page01B',
component: page01B,
children: [
{
path: 'end',
name: 'pageEnd',
component: pageEnd
}
]
}
]
},
{
path: '/page02',
name: 'page02',
component: page02
}
]
})
配置 path 的时候,以 " / " 开头的嵌套路径会被当作根路径,所以子路由的 path 不需要添加 " / "
按钮在执行跳转之前,还会执行一系列方法,这时可以使用 this.$router.push(location) 来修改 url,完成跳转,App.vue 只是作为一个存放组件的容器。
App.vue代码如下:
<template>
<div>
<ul>
<li v-for="item in links"><a @click="$goRoute(item.route)">{{item.text}}</a></li>
</ul>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
links: [
{
text: '胡萝卜',
route: '/home'
},
{
text: '大白菜',
route: '/page01'
},
{
text: '水蜜桃',
route: '/page02'
}
]
}
}
}
</script>
对应的main.js设置method:
// 路由跳转
Vue.prototype.$goRoute = function (index) {
this.$router.push(index);
}
特别提醒----push 后面可以是对象,也可以是字符串:
// 字符串
this.$router.push('/home/first')
// 对象
this.$router.push({ path: '/home/first' })
// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})
同样是push跳转另一个形式的demo:
1.router配置:
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>
3.使用js动态跳转到其他页面,使用router.push()跳转
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】
}
})
}
})
}
}