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)
    }
},

 

仅供参考~ ^-^