vue 子组件页面push_Vue路由vue-router使用this.$router.push();实现页面跳转以及传参。...

自己摸索着加网上找到的文档学习记录的，看着比较多，但是认真看完理解，应该基本对路由就会了(以后可能继续补充)~：D

正文：

首先请确保项目已经安装了vue-router：

运行命令：npm install vue-router --save  (也可自行百度)

安装后在项目package.json 文件中查看vue-router版本信息：

"dependencies": {

"axios": "^0.18.1",

"element-ui": "^2.13.0",

"npm": "^6.14.2",

"vue": "^2.6.11",

"vue-router": "^3.1.6",

"webpack": "^3.8.0",

"webpack-dev-server": "^2.9.7"

},

在项目中新建router文件，外加两个js文件，router.js 和 index.js 用于定义路由和配置路由。

router.js

import mainMenu from '../packages/project-main/main-menu.vue'

import projectGuiLin from '../packages/project-main/project-guilin.vue'

import topMenu from '../packages/project-main/top-menu.vue'

export const VueRouter = [

{

path:'/topMenu',

name:'topMenu',

component:topMenu,

//父页面 包含 子页面跳转时的路由配置写法

//显然父组件中已经给子组件分配了渲染时的显示位置，有了嵌套路由，渲染时父子组件都会被渲染

children:[

{

path:'/topMenu/mainMenu',

name:'mainMenu',

component:mainMenu,

},

{

path:'/topMenu/projectGuiLin',

name:'projectGuiLin',

component:projectGuiLin,

}

]

},

//登录页路由

{

path:'/login',

name:'login',

component:login,

},

//设置默认路由页

{

path:'/',

redirect:'login',

},

];

export const projectRouter =[...VueRouter];//下面记得留一空行

index.js

import Vue from "vue";

import Router from "vue-router";

import {

projectRouter

} from './router'

Vue.use(Router)

//路由配置

const sysConfigRouter={

routes:projectRouter

}

const router = new Router(sysConfigRouter)//使用路由配置

export default router;

然后！在src下的main.js文件中初始化router路由才行哦~~~

import Vue from "vue";

import App from "../test/App.vue";

import ElementUI from "element-ui";

import "element-ui/lib/theme-chalk/index.css";

//-----------------------------------------------------------

import router from '../router/index' //引入router

Vue.use(ElementUI);

Vue.config.productionTip = false;

new Vue({

router,//router初始化

el: "#app",

components: { App },

template: ""

});

最后在App.vue文件中加上标签，自动将组件渲染在此标签处。

以上配置完之后，根据自己的业务需要操作即可，我本地搭建的项目操作如下(包括了传参部分)：

-----------------------------分界线-----------------------------

我搭建的项目login.vue点击登录以后，通过this.$router.push({path:' '})即可在router.vue中根据path字段

找到之前路由配置的组件，如图：

login.vue

代码部分(根据push的路由会直接跳转至指定的组件页面，可设置为默认页面，看自己情况设置) :

//点击登录

clickSignIn(){

if(this.loginUserData.userName === "lsc" && this.loginUserData.userPassWord === '123456'){

this.$router.push({path:'/topMenu/mainMenu'})

}

else{

alert("账号或密码不正确！请重新确认~~~~")

}

},

传参部分：注意使用path就不能使用params传参，否则无效。这样记：path+query  /  name+params；

handleSelect();我这里是点击不同菜单控制显示切换不同页面的，key传递true、false给父组件，父组件中通过v-show控制子组件显示隐藏，个人感觉不是很好，还在摸索ing...

handleSelect(key, keyPath) {

if(key === 'nj'){

//path不能和params一起使用，否则params将无效

this.$router.push({path:`/topMenu/mainMenu`,query:{alert:"跳转成功"}});//query传参 参数会显示在地址栏末尾

this.$emit('main-menu',key);

console.log("queryyyyyyyyyyyyyy",this.$route.query.alert)

}

else if(key === 'gl'){

this.$router.push({name:`projectGuiLin`,params:{data:'params传参'}});//params传参

this.$emit('main-menu',key)

console.log("paramssssssssssss",this.$route.params.data)

}

},

仅供参考~ ^-^