Vue中路由的基本使用

最新推荐文章于 2024-11-11 23:32:58 发布

LAAAAaaaaaaaaaaaaa

最新推荐文章于 2024-11-11 23:32:58 发布

阅读量95

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Zac_123456/article/details/128540777

版权

文章介绍了在Vue项目中使用VueRouter进行路由管理的步骤，包括引入Vue和VueRouter的JS文件，创建路由映射，定义组件，挂载到Vue实例，以及在模板中进行页面跳转的方法，同时涉及了路径参数和命名路由的使用。

摘要由CSDN通过智能技术生成

vue中使用路由的步骤

引入js文件，注意要再vue文件之后，可用cdn线上地址

 <!-- 引入vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 1、引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法） -->
    <script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script>

创建路由new VueRouter(),参数是一个对象
创建映射关系，并建立组件

 // 2,创建路由new VueRouter(),接受的参数是一个对象
        const router = new VueRouter({
            // 3,创建映射关系
            routes: [
                // 重定向
                {
                    path: '/',
                    redirect: 'index'
                },
                // 首页
                {
                    path: '/index',
                    component: index
                },
                // 详情页
                {
                    path: '/detail',
                    component: detail,
                },
                // 个人主页
                {
                    path: '/person/:text',
                    component: person,
                    name: 'mine'
                },
            ],
        })

// 组件
        let index = {
            template: '#index',
            methods: {
                toDetail() {
                    this.$router.push({
                        path: '/detail',
                        query: {
                            num: '1234'
                        }
                    })
                },
                toPerson() {
                    this.$router.push({
                        name: 'mine',
                        params: {
                            text: 'name,params'
                        }

                    })
                }
            },
        }
        let detail = {
            template: '#detail',
            created() {
                console.log(this);
            }
        }
        let person = {
            template: '#person',
            created() {
                console.log(this);
            }
        }

挂载到Vue实例上

const vm = new Vue({
            // 4,挂载到vue实例上
            router: router,
            el: '#app',
            data: {
            },
            methods: {
            }
        })

预留展示区域，路由到的组件显示在哪个位置

<div id='app'>
        <!-- 5、预留展示区域<router-view></router-view> -->
        <router-view></router-view>
        <router-link :to="{name:'mine',params:{text:'name,params'} }">去个人中心（传参2）（高亮）</router-link>
    </div>

页面跳转

 <template id="index">
        <div class="box">
            <span>首页</span>
            <!-- 1、声明式跳转 -->
            <router-link to="/detail">去详情页</router-link>
            <!-- path,query传参 -->
            <router-link :to="{path:'detail',query:{text:'path,query'} }">去详情页（传参1）</router-link>
            <!-- name,params传参 -->
            <router-link :to="{name:'mine',params:{text:'name,params'} }">去个人中心（传参2）</router-link>
            <!-- 2、函数式跳转 -->
            <button @click="toDetail">函数方式去详情页</button>
            <button @click="toPerson">函数方式去个人中心</button>
        </div>
    </template>