Vue路由1

晓殇大人

已于 2023-01-05 00:42:07 修改

阅读量43

点赞数

文章标签： vue.js 前端 javascript

于 2023-01-03 22:56:22 首次发布

本文链接：https://blog.csdn.net/dx3906nnn/article/details/128540666

版权

路由的基本使用

<body>
    <div id='app'>
        <!-- 5. 预留展示区域 -->
        <router-view></router-view>
    </div>

    <template id="isIndex">
        <p>首页</p>
    </template>
</body>

<script src="../js/vue.js"></script>
<!-- 1. 引入js文件,注意路由的js文件要放在Vue的js文件下方 -->
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js"></script>
<script>
    /* 
        前后端路由区别
            1	后端路由：对于普通的网站，所有的超链接都是URL地址，所有的URL地址都对应服务器上对应的资源
            2	前端路由：对于单页面应用程序来说，主要通过URL中的hash(#号)来实现不同页面之间的切换，同时，hash有一个特点：HTTP请求中不会包含hash相关的内容；所以，单页面程序中的页面跳转主要用hash实现；
            3	在单页面应用程序中，这种通过hash改变来切换页面的方式，称作前端路由（区别于后端路由）

    */

    /* 
        1 引入js文件，这个js需要放在vue的js后面，自动安装（提供了一个VueRouter的构造方法）
        2 创建路由new VueRouter(),接受的参数是一个对象
        3 在实例化的对象里配置属性routes:[],这个数组里的对象包含path属性和component属性
        4 path属性是url的地址,component属性就是显示的组件（传组件的对象）
        5 创建的路由需要和vue实例关联一下
        6 路由到的组件显示在哪个位置<router-view></router-view>
    */
    let myindex = {
        template: '#isIndex'
    }

    /* 2. 创造一个路由实例 */
    const myRouter = new VueRouter({
        /* 3. 创造映射关系 */
        routes: [
            {
                path: '/index',
                component: myindex,
            },
        ]
    })

    const vm = new Vue({
        /* 4. 挂载到Vue实例上 */
        router: myRouter,
        el: '#app',
        data: {
        },
        methods: {
        }
    })
</script>

结果如下:
在这里插入图片描述

路由的跳转及重定向

<body>
    <div id='app'>
        <router-view></router-view>
    </div>

    <template id="indexOk">
        <div>
            <p>首页</p>
            <!-- router-link标签进行路由跳转 -->
            <!-- 
                其内含有to属性,to的属性值是个方法,其内有两个属性
                    非强制性传参:
                        path: 决定页面跳转到的路由
                        query: 决定跳转时携带的参数,可以没有
                    强制性传参:(若是不传参,页面能正常跳转但页面刷新时将不再显示页面)
                        name: 决定页面跳转到的路由
                        params: 决定跳转时携带的参数,可以没有
            -->
            <!-- 声明式跳转方法 -->
            <router-link :to="detailNeed">走!去详情页</router-link>
            <router-link :to="myNeed">走!去个人页面</router-link>
            <!-- 函数式跳转方法 -->
            <button @click="goDetail">go去详情页</button>
            <button @click="goMy">go去个人页面</button>
        </div>
    </template>

    <template id="detailOk">
        <p>详情</p>
    </template>

    <template id="myOk">
        <p>个人页面</p>
    </template>
</body>

<script>

    let isIndex = {
        template: '#indexOk',
        data() {
            return {
                detailNeed: {
                    path: '/detail',
                    query: {
                        courseId: 110,
                        name: '你犯事儿了,你知道么'
                    }
                },
                myNeed: {
                    name: '/my',
                    params: {
                        courseId: 120,
                        name: '出人命啦,哎呀~!'
                    }
                }
            }
        },
        methods: {
            goDetail() {
                this.$router.push({
                    path: '/detail',
                    query: {
                        courseId: 110,
                        name: '你犯事儿了,你知道么'
                    }
                })
            },
            goMy() {
                this.$router.push({
                    name: '/my',
                    params: {
                        courseId: 120,
                        name: '出人命啦,哎呀~!'
                    }
                })
            }
        }
    }

    let isDetail = {
        template: '#detailOk',
        created() {
            console.log(this);
            console.log(this.$route.query.courseId);
            console.log(this.$route.query.name);
        }
    }

    let isMy = {
        template: '#myOk',
        created() {
            console.log(this);
            console.log(this.$route.params.courseId);
            console.log(this.$route.params.name);
        }
    }

    const myRoute = new VueRouter({
        routes: [
            {
                /* 
                路由重定向, 有两个自带属性
                    path: 遇到其属性值的路由直接跳转
                    redirect: 重定向的目标路由
                */
                path: '/',
                redirect: '/index'

            },
            {
                path: '/index',
                component: isIndex
            },
            {
                path: '/detail',
                component: isDetail
            },
            // 强制传值跳转的路由写法:
            {
                name: '/my',
                // 传递多个值需要&符号作分割
                path: '/my/:courseId&:name',
                component: isMy
            }
        ]
    })

    const vm = new Vue({
        el: '#app',
        router: myRoute,
        data: {
        },
        methods: {
        }
    })
</script>