Vue-Router动态路由

原创已于 2022-03-04 12:07:02 修改 · 6k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-03-04 11:58:36 首次发布

本文详细介绍了如何在Vue应用中使用动态路由通过`:params`和`:to`属性实现页面跳转，并展示了在About.vue和User.vue组件中接收和显示参数的方法。涵盖了Vue Router的基本用法和参数动态绑定的实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

作用：动态拼接一些路径

语法：/user/:userId(:XX表示可以动态拼接，路径可以渲染成/user/zhangsan或者/user/lisi等等)

1.通过router-link渲染的跳转页面

通过动态绑定to属性后面跟着动态路由来跳转页面(:to="’/about/’+info")

Router-Index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const About = () => import('../views/About.vue');

const routes = [
  {
    path: '/about/:info',
    component: About
  }
];

const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
});

export default router;

App.vue

<template>
  <div>
    <!-- 通过router-link动态路由传参 -->
    <router-link :to="'/about/'+info">About</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      info: 'hello vuejs'
    }
  }
}
</script>

<style>
.active {
  color: #1890ff;
}
</style>

About.vue

<template>
  <div>
    <h2>About</h2>
    <!-- 可以通过($route.params.动态传参)获取数据 -->
    <p>{{ $route.params.info }}</p>
  </div>
</template>

<script>
export default {
  name: 'About'
}
</script>

<style>

</style>

2.通过普通标签渲染的跳转页面

通过this.$router.push(’/user/’ + this.userId)获取数据

Router-Index.js

import Vue from 'vue';
import VueRouter from 'vue-router';
Vue.use(VueRouter);

const User = () => import('../views/User.vue');

const routes = [
  {
    path: '/user/:userId',
    component: User
  }
];

const router = new VueRouter({
  routes,
  mode: 'history',
  linkActiveClass: 'active'
});

export default router;

App.vue

<template>
  <div>
    <!-- 通过普通button动态路由传参 -->
    <button @click="userClick">用户</button>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      userId: 'zhangsan'
    }
  },
  methods: {
    userClick() {
      this.$router.push('/user/' + this.userId);
    }
  }
}
</script>

<style>
.active {
  color: #1890ff;
}
</style>

User.vue

<template>
  <div>
    <h2>User</h2>
    <p>{{ $route.params.userId }}</p>
  </div>
</template>

<script>
export default {
  name: 'User'
}
</script>

<style>

</style>