vue路由2：传参及获取传参

最新推荐文章于 2025-06-11 02:06:48 发布

duansamve

最新推荐文章于 2025-06-11 02:06:48 发布

阅读量644

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 文章标签： vue 路由 router

本文链接：https://blog.youkuaiyun.com/duansamve/article/details/80036154

vue 专栏收录该内容

115 篇文章

订阅专栏

本文通过具体实例介绍了如何使用Vue.js框架实现页面路由导航。包括定义路由路径、组件展示及参数传递等核心功能，并展示了两种不同配置方式。

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

普通文件中：

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <div>
        <router-link to="/">首页</router-link>
        <router-link to="/about">关于我们</router-link>
        <router-link to="/user/黄花花">黄花花</router-link>
        <router-link to="/user/李栓蛋">李栓蛋</router-link>
    </div>

    <div>
        <router-view></router-view>
    </div>
</div>

<script src="../lib/vue.js"></script>
<script src="../lib/router.js"></script>
<script src="./js/app.js"></script>
</body>
</html>

app.js:

var routes = [
    {
        path: '/',
        component: {
            template: '<div><h1>首页</h1></div>'
        }
    },{
        path: '/about',
        component: {
            template: '<div><h2>关于我们</h2></div>'
        }
    },{
        path: '/user/:name',
        component: {
            template: '<div><h2>我叫：{{$route.params.name}}</h2></div>'
        }
    }
];

var router = new VueRouter({
    routes: routes
});

new Vue({
    el: '#app',
    router: router
})

单文件组件中：

index.js:

import Vue from 'vue'
import Router from 'vue-router'
import Consult from '@/components/Consult'
import Employment from '@/components/Employment'
import Home from '@/components/Home'
import Introduce from '@/components/Introduce'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/home',
      name: 'home',
      component: Home
    },
    {
      path: '/consult/:name',
      name: 'consult',
      component: Consult
    },
    {
      path: '/employment',
      name: 'employment',
      component: Employment
    },
    {
      path: '/introduce',
      name: 'introduce',
      component: Introduce
    }
  ]
})

Consult.vue:

<template>
  <div class="consult">
    咨询：{{$route.params.name}}
  </div>
</template>

<script>

</script>

<style scoped>
.consult{
  font-size:20px;
  color:#000;
  margin:20px auto;
}
</style>