【Vue】路由网站首页 技术杂谈

【Vue】路由

山有扶苏.. 2024-06-17 10:29:51

简介【Vue】路由

文章目录

一、路由的概念
二、路由的实例化

一、路由的概念

1.后端路由

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

2.前端路由

对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换

3.单页面应有程序

在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

二、路由的实例化

1.路由实例化步骤

1.引入js文件
2.创建路由new VueRouter(),接受的参数是一个对象
const router = new VueRouter({})
3.创建映射关系
routes : [{
path : URL地址,
component : 组件
}]
4.将路由实例挂载到Vue实例上
5.预留展示区域

2.声明式的路由跳转

router-link 标签可以设置to属性：
<router - link to=“”></router - link>
传参：
<router - link :to=“{path:‘’,query:{} }”></router - link>
path – query
name – params 必须传参，更安全
<router - link :to=“{name:‘’,params:{} }”></router - link>

3.函数式路由跳转传参

<button @click=“toDetail”>toDetail
this.$router.push({})

4.路由的重定向 redirect

redirect可以进行路由的重定向

5.路由高亮

直接设置：router-link-active
自定义类名：配置 linkActiveClass :‘自定义类名’

6.组件的嵌套

1.声明路由的时候设置children，children是一个数组，数组里是路由对象
2.children的组件渲染到父组件的上

7.命名视图 components: { }

设置components属性，给router-view设置名字，这个名字与components组件名字对应

8.代码

<head>
    <style>
        /* 路由高亮 */
        .router-link-active {
            font-size: 40px;
            font-weight: 600;
            color: aqua;
        }
        /* 自定义类名 */
        .font {
            font-size: 40px;
            font-weight: 600;
            color: aqua;
        }
    </style>
</head>
<body>
    <div id='app'>
        <!-- 
            1.引入js文件
            2.创建路由new VueRouter(),接受的参数是一个对象
            const router = new VueRouter({})
            3.创建映射关系
            routes : [{
                path : URL地址,
                component : 组件
            }]
            4.将路由实例挂载到Vue实例上
            5.预留展示区域
            <router-view></router-view>
         -->
        <router-view></router-view>
    </div>
    <template id="index">
        <div>
            首页
            <router-link to="/detail">去详情</router-link>
            <!-- 声明式路由跳转 -->
            <router-link :to="{path:'/detail',query:{courseId:121} }">去详情页</router-link>
            <!-- 更安全 -->
            <router-link :to="{name:'me',params:{ids:123} }">去个人中心</router-link>
            <!-- 函数式路由跳转 -->
            <button @click="toDetail">toDetail</button>
            <button @click="toMine">toMine</button>
        </div>
    </template>
    <template id="detail">
        <div>
            详情页
            <router-view></router-view>
        </div>
    </template>
    <template id="mine">
        <div>
            个人中心
        </div>
    </template>
    <template id="course">
        <div>
            course
        </div>
    </template>
    <template id="study">
        <div>
            study
        </div>
    </template>
    <script>
        let index = {
            template: '#index',
            methods: {
                toDetail() {
                    this.$router.push({
                        path: '/detail',
                        query: {
                            id: 134
                        }
                    })
                },
                toMine() {
                    this.$router.push({
                        name: 'me',
                        params: {
                            ids: 8080
                        }
                    })
                }
            }
        }
        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);
            }
        }
        // 创建路由实例
        const router = new VueRouter({
            // 创建映射关系
            routes: [{
                // 路由的重定向
                path: '/',
                redirect: '/index'
            },
            {
                path: '/index',
                // 命名视图
                components: {
                    default: index,
                    detail,
                    mine
                }
            },
            {
                path: '/detail',
                component: detail,
                /* 
                路由嵌套:
                    1.声明路由的时候设置children，children是一个数组，数组里是路由对象
                    2.children的组件渲染到父组件的<router-view></router-view>上
                */
                children: [
                    {
                        // path 路径后不能加 '/'
                        path: 'course',
                        component: course
                    },
                    {
                        path: 'study',
                        component: study
                    }
                ]
            },
            {
                path: '/mine/:ids',
                name: 'me',
                component: mine
            }
            ],
            // 配置 linkActiveClass :'自定义类名'
            linkActiveClass: 'font'
        })
        const vm = new Vue({
            // 路由实例挂载到Vue实例上
            router,
            el: '#app',
            data: {
            },
            methods: {
            }
        })
    </script>
</body>