动态路由 命名式路由 点击列表项跳转到对应详情页

本文介绍了在Vue.js中如何设置动态路由和命名式路由,通过列表页的nowPlack点击,实现跳转到对应详情页(detal)的功能。示例代码展示了如何配置路由,包括嵌套路由和使用`:id`参数来传递详情页的唯一标识。

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

列表页 nowPlack

<template>
    <div>
        nowPlack列表页  films的子页面,
        <ul>
            <li v-for="(item,id) in List" :key="id" @click="handClickPage(id)">
                <img :src="item.url" alt="">
                {{item.name}}
                {{item.id}}
                <!-- 列表跳详情,声明式写法,需要传参给to前面加上冒号  但是长列表一般不适用-->
                <!-- <router-link to="/detal">{{item.usename}}</router-link> -->
            </li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
export default {
    data(){
        return{
           List:[] 
        }
    },
    mounted(){
        //https://m.maizuo.com
        axios.get('http://rap2api.taobao.org/app/mock/279550/http/get')
           .then(res=>{
            // console.log('rap2数据',res.data.data[0].list)
            this.List = res.data.data[0].list
            console.log('list数据',this.List)
        })
    },
    methods:{
        handClickPage(id){
            console.log(id)
            //编程式导航 1
            // location.href = '#/detal'
            //编程式导航 2    可以避免忘写 #
            this.$router.push(`/detal/${id}`)//router拿到的是(配置的)整个路由对象
        }
    }
}
</script>

命名式路由js代码

<script>
import axios from 'axios'
export default {
    data(){
        return{
           List:[] 
        }
    },
    mounted(){
        //https://m.maizuo.com
        axios.get('http://rap2api.taobao.org/app/mock/279550/http/get')
           .then(res=>{
            // console.log('rap2数据',res.data.data[0].list)
            this.List = res.data.data[0].list
            console.log('list数据',this.List)
        })
    },
    methods:{
        handClickPage(id){
            //通过命名路由跳转
            this.$router.push({
                name:'detal',
                params:{
                    id
                }
            })
        }
    }
}
</script>

详情页 detal

<template>
    <div>
        detal详情页 点击nowPlack的列表项跳转详情
    </div>
</template>
<script>
export default {
    data(){
        return{
           
        }
    },
    created(){
        //console.log('created',location.href)//拿到的是路径
        //route拿到的是当前匹配的路由
        console.log('created',this.$route.params.id)
        //axios利用id发请求到详情接口,获取详情数据,布局页面
    }
}
</script>

路由写法

 {
        path:'/films',
        component:Films,
        children:[
            //嵌套的页面(列表页)
            {
                path:'/films/nowPlack',
                component:NowPlack
            },
            {
                path:'/films/comeSinge',
                component:comeSinge
            },
            {
                path:'/films',
                redirect:'/films/nowPlack'
            }
        ]
    },
    { 
        //动态路由 :是固定  id是可以自定义的
        //这里匹配到了二级路由,也可以匹配三级四级,在:id后面依次在加上三级四级详情页的跳转i路径,我这里主要是根据id识别判定的每一项的详情页
        path:'/detal/:id',
        component:Detal
    },

命名式路由写法

{
path:‘/films’,
component:Films,
children:[
//嵌套的页面(列表页)
{
path:‘/films/nowPlack’,
component:NowPlack
},
{
path:‘/films/comeSinge’,
component:comeSinge
},
{
path:‘/films’,
redirect:‘/films/nowPlack’
}
]
},
//命名路由
{
name:‘detal’,
path:‘/detal/:id’,
component:Detal
},

### Vue.js 路由的配置方法 在 Vue.js 中,路由可以通过 `Vue Router` 这一官方插件来实现。以下是关于如何进行路由配置的具体说明: #### 1. 安装 Vue Router 为了使用 Vue Router,首先需要安装它。如果项目基于 Vue CLI 创建,则可以直接通过 npm 或 yarn 来安装该依赖项。 ```bash npm install vue-router ``` 或者, ```bash yarn add vue-router ``` 此操作会将 Vue Router 添加到项目的依赖列表中[^1]。 #### 2. 配置路由对象 创建一个路由文件(通常命名为 `router/index.js`),并在此处定义所有的路由规则以及对应的组件。 ```javascript import { createRouter, createWebHistory } from 'vue-router'; import HomeView from '../views/HomeView.vue'; // 假设有一个主页组件 import AboutView from '../views/AboutView.vue'; // 假设有另一个关于我们页面的组件 const routes = [ { path: '/', name: 'home', component: HomeView, }, { path: '/about', name: 'about', component: AboutView, } ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 上述代码片段展示了基本的路由设置方,其中包含了两个简单的路由:根路径 `/` 和 `/about`,分别指向各自的视图组件[^4]。 #### 3. 在主应用入口引入路由实例 接着,在主程序入口文件(通常是 `main.js` 或者 `main.ts`)里导入刚刚创建好的路由模块,并将其挂载至 Vue 实例上。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; import router from './router'; createApp(App).use(router).mount('#app'); ``` 这样就完成了整个框架对于路由的支持初始化工作[^2]。 #### 4. 使用 `<router-view>` 渲染对应的内容 最后一步是在模板中的适当位置加入 `<router-view>` 标签。这个标签的作用是用来显示当前活动路由所关联的那个组件内容。 ```html <template> <div id="app"> <!-- 此处用于展示不同路由下的具体内容 --> <router-view></router-view> </div> </template> <script> // ... </script> ``` 以上步骤即构成了完整的 Vue.js 的基础路由配置流程[^5]。 #### 动态路由支持 除了静态路由外,还可以利用动态参数增强灵活性。例如下面的例子演示了一个带 ID 参数的商品详情页链接形及其处理逻辑: ```javascript { path: '/goods/:id', // :id 表示这是个可变部分 name: 'goodDetail', component: GoodDetailView, } ``` 然后可以在实际 HTML 页面内像这样构建导航连接: ```html <router-link to="/goods/1001">查看商品</router-link> ``` 此时点击后将会跳转至指定的产品编号界面,并且能够获取到 URL 上携带的数据以便进一步加工使用[^3]。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值