vue-router: 路由传参

本文介绍了一种使用Vue.js和Vue Router实现路由传参的方法。通过新闻列表页与详情页的例子,展示了如何设置路由链接和接收参数的过程。

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

路由传参数。在很多时候我们需要路由上面传递参数,比如新闻列表页,我们需要传递新闻ID,给新闻详细页。
1.新闻列表页模板

    <template id="news">
        <div>
            <h2>新闻列表</h2>
            <ul>
                <li>
                    <router-link to="/news/001">新闻001</router-link>
                </li>
                <li>
                    <router-link to="/news/002">新闻002</router-link>
                </li>
            </ul>           
        </div>
    </template>

我们访问/news/001,跳转到新闻详细页,展示001的这条新闻。

2.新闻详细页组件准备

    <template id="NewsDetail">
        <div>
            新闻详细页面
            <span>{{$route.params.id}}</span>
        </div>
    </template>

$route.params.id获取路由上的参数
在js里定义路由组件:

//新闻详细页组件
        const NewsDetail = { template: '#NewsDetail' };

3.定义路由,增加一个路由

    { path: '/news/:id', component: NewsDetail },

访问/news/001或者/news/002就展示新闻详细页
这里写图片描述

4.全部代码如下:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="http://unpkg.com/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
</head>
<body> 
    <div id="box">
        <p>
            <router-link to="/home">home</router-link>
            <router-link to="/news">news</router-link>
        </p>
          <router-view></router-view>
    </div>

    <!-- 模板抽离出来 -->
    <template id="home">
        <!-- 注意:组件只能有一个根元素,所以我们包装到这个div中 -->
        <div>
            <h2>首页</h2>
             <router-link to="/home/login">登录</router-link>
            <router-link to="/home/reg">注册</router-link>
            <!-- 路由匹配到的组件将渲染在这里 -->
            <router-view></router-view>
        </div>
    </template>

    <template id="news">
        <div>
            <h2>新闻列表</h2>
            <ul>
                <li>
                    <router-link to="/news/001">新闻001</router-link>
                </li>
                <li>
                    <router-link to="/news/002">新闻002</router-link>
                </li>
            </ul>           
        </div>
    </template>

    <template id="login">
        <div>登录界面</div>
    </template>
    <template id="reg">
        <div>注册界面</div>
    </template>

    <template id="NewsDetail">
        <div>
            新闻详细页面
            <span>{{$route.params.id}}</span>
        </div>
    </template>

    <script type="text/javascript">
        // 1. 定义(路由)组件。
        const Home = { template: '#home' };
        const News = { template: '#news' };

        const Login = { template: '#login' };
        const Reg = { template: '#reg' };

        //新闻详细页组件
        const NewsDetail = { template: '#NewsDetail' };


        // 2. 定义路由
        const routes = [
             { path: '/', redirect: '/home' },
            { 
                path: '/home', 
                component: Home, 
                children:[
                    { path: '/home/login', component: Login},
                    { path: '/home/reg', component: Reg}
                ]
            },
            { path: '/news', component: News,},
            { path: '/news/:id', component: NewsDetail },

        ]

        // 3. 创建 router 实例,然后传 `routes` 配置
        const router = new VueRouter({
            routes // (缩写)相当于 routes: routes
        })


        // 4. 创建和挂载根实例。
        // 记得要通过 router 配置参数注入路由,
        // 从而让整个应用都有路由功能
        const app = new Vue({
          router
        }).$mount('#box')

        // 现在,应用已经启动了!
    </script>
</body>
</html>
### 实现 Vue-Router 4.5.0 中的路由参数递 在 Vue-Router 4.5.0 版本中,可以通过多种方式来实现路由之间的参数递。以下是几种常见的方法及其具体实现。 #### 使用 `params` 参数递 通过定义动态路径片段并使用 `$route.params` 来获取这些参数: ```javascript // 定义带参数路由规则 const routes = [ { path: '/user/:id', name: 'User', component: UserComponent, }, ]; // 获取 params 参数 import { useRoute } from 'vue-router'; export default { setup() { const route = useRoute(); // 打印 id 参数 console.log(route.params.id); } }; ``` 这种方式适用于需要在 URL 地址栏显示参数的情况[^2]。 #### 使用查询字符串 (`query`) 进行传参 当不希望参数出现在 URL 的一部分而是作为附加信息时,可以采用 query 方式: ```javascript // 导航到带有查询参数的目标页面 this.$router.push({ name: 'search', query: { q: 'Vue' } }); // 接收方组件内读取查询参数 import { useRoute } from 'vue-router'; setup() { const route = useRoute(); // 访问查询参数中的 q 值 console.log(route.query.q); } ``` 此方法适合用于分页、筛选条件等场景下不需要改变历史记录条目的情况。 #### 利用命名视图与嵌套路由组合递复杂结构化的数据 对于更复杂的多级或多区域布局需求,则可借助于命名视图以及子路由的方式来进行更为灵活的数据交换: ```javascript { path: '/', components: { default: HomeView, user: UserProfile, }, children:[ { path:'profile', component:ProfileDetail } ] } ``` 上述例子展示了如何在一个父级路由之下设置多个具有不同名称的子视图,并且可以在它们之间共享状态或进一步细化各自的逻辑处理流程[^1]。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值