vue中的路由深入了解和路由传参

babyxuqian

已于 2022-05-13 11:34:58 修改

阅读量676

点赞数

分类专栏： vue 文章标签： vue.js 前端 javascript

于 2022-03-10 14:22:53 首次发布

本文链接：https://blog.csdn.net/babyxuqian/article/details/123395224

版权

vue 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

什么是路由

vue路由是根据url分配对应的处理程序；点击链接，修改url地址，路由监听到url地址改变后，进行路由规则匹配，匹配到后通过router-view来显示对应组件。

路由跳转的用法第一种方法（声明式）

1.在页面中定义：

<template>
  <div>
    <!-- 使用router-link 路由组件跳转（相当于链接） -->
    <!-- 通过to 可以跳转到指定的页面 -->

    <!-- 常见的方式-->
    <router-link to="/List">跳转到List页面</router-link>
    <router-link to="/About">跳转到About页面</router-link>
    
    <!-- 通过对象的方式跳转 -->
    <router-link :to="{ path: '/List' }">跳转到List页面</router-link>
    <router-link :to="{ path: '/About' }">跳转到About页面</router-link>

    <!-- 通过路由名字的方式跳转 -->
    <router-link :to="{ name: 'List' }">跳转到List页面</router-link>
    <router-link :to="{ name: 'About' }">跳转到About页面</router-link>

    <!-- router-view 路由出口 将路由匹配到的组件显示到里面 -->
    <router-view></router-view>
  </div>
</template>

2.在router.js中定义路由

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: '/About',    //重定向
  },
  {
    path: "/About",
    name: "About",
    component: () => import("../views/About/index.vue"),
  },
  {
    path: "/List",
    name: "List",
    component: () => import("../views/List/index.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  linkActiveClass: 'active'
});

export default router;

路由跳转的用法第二种方法（编程式）

1.在页面中定义：

<template>
  <div>
    <button @click="goAbout">跳转到About页面</button>
    <button @click="goList">跳转到List页面</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    goAbout() {
      this.$router.push("/About");
    },
    goList() {
      this.$router.push("/List");
    },
  },
};
</script>

2.在router.js中定义路由

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: '/About',    //重定向
  },
  {
    path: "/About",
    name: "About",
    component: () => import("../views/About/index.vue"),
  },
  {
    path: "/List",
    name: "List",
    component: () => import("../views/List/index.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  linkActiveClass: 'active'
});

export default router;

路由的传参方式第一种方法

1.在要跳转的页面中定义：

<template>
  <div>
    
    <!-- 第一种：直接传参 http://localhost:8080/My/100 (this.$route.params 获取方法)-->
    <router-link :to="'/My/' + 100">跳转到My页面</router-link>

    <!-- 第二种：query传参 http://localhost:8080/About?id=10&name=xq -->
    <router-link :to="{ path: '/About', query: { id: 10, name: 'xq' } }">跳转到About页面</router-link>
    <router-link :to="{ name: 'About', query: { id: 10, name: 'xq' } }">跳转到About页面</router-link>

    <!-- 第三种：params传参 http://localhost:8080/List/10/xq （params传参对地址路由path不生效，只对命名路由name生效）-->
    <router-link :to="{ path: '/List', params: { id: 10, name: 'xq' } }">跳转到List页面</router-link>
    <router-link :to="{ name: 'List', params: { id: 10, name: 'xq' } }">跳转到List页面</router-link>

  </div>
</template>

2.在跳转到的页面中获取所带的参数：

<template>
  <div>
    <h1>{{$route.params.myId}}</h1>
    <h1>{{$route.query.id}}--{{$route.query.name}}</h1>
    <h1>{{$route.params.id}}--{{$route.query.name}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(this.$route.params.myId);
    console.log(this.$route.query.id, this.$route.query.name);
    console.log(this.$route.params.id,this.$route.params.name)
  },
};
</script>

3.在router.js中定义路由

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: '/About',    //重定向
  },
  {
    path: "/About",
    name: "About",
    component: () => import("../views/About/index.vue"),
  },
  {
    path: "/List/:id/:name",  //params需要  path不用
    name: "List",
    component: () => import("../views/List/index.vue"),
  },
  {
    path: "/My/:myId",
    name: "My",
    component: () => import("../views/My/index.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  linkActiveClass: 'active'
});

export default router;

路由的传参方式第二种方法

1.在要跳转的页面中定义：

<template>
  <div>
    <button @click="goAbout">跳转到About页面</button>
    <button @click="goList">跳转到List页面</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },

  methods: {
    goAbout() {
      this.$router.push({
        path: "/About",
        query: {
          id: 1,
          name: "xq",
        },
      });
    },
    goList() {
      this.$router.push({
        name: "List",
        query: {
          id: 1,
          name: "XQ",
        },
      });
    },
  },
};
</script>

2.在跳转到的页面中获取所带的参数：

<template>
  <div>
    <h1>{{$route.query.id}}--{{$route.query.name}}</h1>
    <h1>{{$route.params.id}}--{{$route.query.name}}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  mounted() {
    console.log(this.$route.query.id, this.$route.query.name);
    console.log(this.$route.params.id,this.$route.params.name)
  },
};
</script>

3.在router.js中定义路由

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    redirect: '/About',    //重定向
  },
  {
    path: "/About",
    name: "About",
    component: () => import("../views/About/index.vue"),
  },
  {
    path: "/List",
    name: "List",
    component: () => import("../views/List/index.vue"),
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
  linkActiveClass: 'active'
});

export default router;

后续（防止导航出现问题）

解决办法在router.js中

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

//保存下来push方法 将来我们还会用到原push方法进行路由跳转
let originPush = Router.prototype.push;
//接下来我们重写push|replace方法
//第一个参数location参数像原push方法声明跳转的地方 resolve和reject传递成功与失败

Router.prototype.push = function(location, resolve, reject) {
  if (resolve && reject) {
    //如果成功 调用原来的push方法
    originPush.call(this, location, resolve, reject);
  } else {
    originPush.call(this, location, () => {}, () => {});
  }
}

路由简单拦截

import Vue from 'vue'
import VueRouter from 'vue-router'
import { Message } from 'element-ui';

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    redirect: '/login'
  },
  {
    path: '/login',
    component: () => import('../login/index.vue'),
  },
  {
    path: '/layout',
    name: 'layout',
    redirect: '/home',
    meta: { title: '首页' },
    component: () => import("../layout/index.vue"),
    children: [
      {
        path: "/home",
        name: "home",
        component: () => import("../views/home/index.vue"),
      },
      {
        path: "/tableList",
        name: "tableList",
        meta: { title: 'vue入门实例' },
        redirect: '/crud',
        component: () => import("../views/tableList/index.vue"),
        children: [
          {
            path: "/crud",
            name: "crud",
            meta: { title: '增删改查' },
            component: () => import("../views/tableList/crud.vue"),
          },
          {
            path: "/shopCar",
            name: "shopCar",
            meta: { title: '购物车' },
            component: () => import("../views/tableList/shopCar.vue"),
          },
        ]
      },
    ]
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

//路由拦截
router.beforeEach((to, from, next) => {
  if (to.path == '/login') {
    next()
  } else if (sessionStorage.getItem('username')) {
    next()
  } else {
    Message({
      showClose: true,
      message: '请先登录',
      type: 'warning'
    });
    next('/login')
  }
})
export default router