【vue中路由的使用】网站首页 技术教程

【vue中路由的使用】

聪明的墨菲特学前端 2024-06-17 10:26:16

简介【vue中路由的使用】

【vue中路由的使用】

什么是路由

后端路由：

对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源

前端路由：

对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

路由的基本使用

● 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
● 创建路由new VueRouter(),接受的参数是一个对象
● 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
● path属性是url的地址,component属性就是显示的组件（传组件的对象）
● 创建的路由需要和vue实例关联一下
● 路由到的组件显示在哪个位置

路由的跳转

● router-link标签可以设置to属性
● 默认是a标签，可以通过tag设置包裹标签
使用浏览器参数的方式传递参数
● 设置路由的时候/路由地址/:参数名
● 获取参数$route.params.参数名

组件的嵌套

● 声明路由的时候设置children,这是children是一个数组，数组里是路由对象
● 这个children的组件就会渲染在它父组件的中

路由重定向

redirect可以进行路由的重定向

选中路由高亮

使用默认的样式
直接设置 router-link-active
自定义样式
配置 linkActiveClass:‘自定义的类名’

代码解析

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title></title>
    <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>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <style>
        /* 路由高亮 */
        .router-link-active {
            font-size: 40px;
            color: pink;
        }


        .active {
            font-size: 40px;
            color: pink;
        }
    </style>
</head>


<body>
    <div id='app'>
        <!-- 
            1   引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
            2   创建路由new VueRouter(),接受的参数是一个对象
            3   在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
            4   path属性是url的地址,component属性就是显示的组件（传组件的对象）
            5   创建的路由需要和vue实例关联一下
            6   路由到的组件显示在哪个位置<router-view></router-view>
         -->
        <!-- 5、预留展示区域 -->
        <router-view></router-view>
        <router-view name="detail"></router-view>
        <router-view name="mine"></router-view>
        <router-link :to="{path:'/detail', query:{courseid:123,id:456} }">去详情1</router-link>


        <router-link :to="{name:'my',params:{ids:789} }">去个人中心</router-link>
    </div>
    <template id="index">
        <div>
            首页
            <a href="#/detail?coreseId=123">去详情a</a>
            <!--    router-link标签可以设置to属性 -->
            <router-link to="/detail">去详情</router-link>
            <!-- 声明式的路由跳转 -->                                                                
            <!-- 路由的跳转  传参 -->
            <router-link :to="{path:'/detail', query:{courseid:123,id:456} }">去详情1</router-link>
            <router-link :to="{name:'my',params:{ids:789} }">去个人中心</router-link>
            <!-- 错误写法 -->
            <!-- <router-link :to="{name:'my' }">去个人中心1</router-link> -->


            <!-- 函数式 -->
            <button @click="toDetail">toDetail</button>
            <button @click="toMine">toMine</button>
        </div>
    </template>


    <!-- 1. 声明路由的时候设置children,这是children是一个数组，数组里是路由对象
         2. 这个children的组件就会渲染在它父组件的<router-view>中
 -->


    <template id="detail">
        <div>
            详情页
            <router-view></router-view>
        </div>
    </template>


    <template id="mine">
        <div>
            个人中心
        </div>
    </template>


    <template id="play">
        <div>
            play
        </div>
    </template>



    <template id="study">
        <div>
            study
        </div>
    </template>


    <script>


        let play = {
            template: '#play'
        }
        let study = {
            template: '#study'
        }
        let index = {
            template: '#index',
            methods: {
                toDetail() {
                    console.log(1);
                    // this.$router.push('/detail')
                    this.$router.push({
                        path: '/detail',
                        query: {
                            id: 12312
                        }
                    })
                },
                toMine() {
                    this.$router.push({
                        name: 'my',
                        params: {
                            ids: 8908
                        }
                    })
                }
            }
        }


        let detail = {
            template: '#detail',
            created() {
                console.log(this);
                console.log(this.$route.query);
                console.log(this.$route.query.courseid);
            }
        }


        let mine = {
            template: '#mine',
            created() {
                console.log(this);
                console.log(this.$route.params.ids);
            }
        }


        // 2、创建路由实例
        const router = new VueRouter({
            // 3、创建映射关系
            routes: [
                // 路由的重定向
                {
                    path: '/',
                    redirect: '/index'
                },
                {
                    path: '/index',
                    // component: index
                    // 命名视图
                    components: {
                        default: index,
                        detail,
                        mine
                    }
                },
                {
                    path: '/detail',
                    component: detail,
                    // 路由嵌套
                    children: [
                        // path路径后不能加 / 
                        {
                            path: 'play',
                            component: play
                        },
                        {
                            path: 'study',
                            component: study
                        }
                    ]
                },
                {
                    path: '/mine/:ids',
                    name: 'my',
                    component: mine
                }
            ],
            // 配置 linkActiveClass: '自定义的类名'
            linkActiveClass: 'active'
        })
        const vm = new Vue({
            // 4、将路由实例挂载到vue实例上
            // router: router,
            router,
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>