003-路由

豚豚鼠

已于 2024-03-07 21:56:56 修改

阅读量266

点赞数 2

分类专栏： 005.VUE框架文章标签： vue.js

于 2020-08-26 23:12:28 首次发布

本文链接：https://blog.csdn.net/loveEveryWeb/article/details/108246659

版权

005.VUE框架专栏收录该内容

18 篇文章 0 订阅

订阅专栏

Vue路由

Vue-router
简单使用
路由跳转
路由跳转传参
嵌套路由
多视图
路由守卫

Vue-router

vue-router 官网： https://router.vuejs.org/zh/guide/

更多的前端项目偏向于单页面应用程序，基于MVVM模式，单页面应用程序跳转不卡顿，切换流畅等；

基础知识点包括：路由跳转、路由跳转传参、嵌套路由、多视图、路由守卫等；

vue-router 在项目的引入包含两种方式：

通过 js 引入

<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

通过模块化，npm install vue-router

简单使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

        <!-- 路由跳转 -->
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>  

        <!-- 跳转引起的刷新 -->
        <router-view></router-view>

    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>

    <script>
        const Foo = {
            template: `
                <div>Foo组件</div>
            `
        }

        const Bar = {
            template: `
                <div>Bar组件</div>
            `
        }

        const routes = [{
                path: '/',
                redirect: '/foo'
            }, {
                path: '/foo',
                component: Foo
            },
            {
                path: '/bar',
                component: Bar
            }
        ]

        const router = new VueRouter({
            routes
        })

        var app = new Vue({
            el: '#app',
            router,
            data: {

            },
        });
    </script>
</body>

</html>

路由跳转

通过 router-link 进行页面跳转；

<router-link to="/foo">Go to Foo</router-link>	<!-- 路由跳转至 /foo -->
<router-link to="/bar">Go to Bar</router-link>	<!-- 路由跳转至 /bar -->

通过 this.$router.push() 控制页面跳转；

const Foo = {
    template: `
        <div>
            <div>Foo组件</div>
            <button @click="go()">跳转至bar</button>	
        </div>
    `,	// 点击按钮进行页面跳转
    methods: {
        go() {
            this.$router.push('/bar');  // 通过 this.$router.push() 进行路由跳转
        },
    }
}

路由跳转传参

不修改路由表进行传参
以 ‘/bar?param=val’ 形式给 bar 组件传参，bar 组件以 this.$route.query 接收

// Foo 组件
const Foo = {
     template: `
         <div>
             <div>Foo组件</div>
             <button @click="go()">跳转至bar</button>
         </div>
     `,
     methods: {
         go() {
             this.$router.push('/bar?id=123');
         },
     }
 }

 // Bar 组件
 const Bar = {
     template: `
         <div>Bar组件</div>
     `,
     created(){
         console.log(this.$route.query); // {id: 123}
     }
 }

 // 路由表
 const routes = [{
         path: '/',
         redirect: '/foo'
     }, {
         path: '/foo',
         component: Foo
     },
     {
         path: '/bar',
         component: Bar
     }
 ]

修改路由表传参
路由表修改为 ‘/bar/:id’，以 ‘/bar/123’ 形式传参，以 this.$route.params 接收

// Foo 组件
const Foo = {
    template: `
        <div>
            <div>Foo组件</div>
            <button @click="go()">跳转至bar</button>
        </div>
    `,
    methods: {
        go() {
            this.$router.push('/bar/123');
        },
    }
}

// Bar 组件
const Bar = {
    template: `
        <div>Bar组件</div>
    `,
    created(){
        console.log(this.$route.params); // {id: 123}
    }
}

// 路由表
const routes = [{
        path: '/',
        redirect: '/foo'
    }, {
        path: '/foo',
        component: Foo
    },
    {
        path: '/bar/:id',
        component: Bar
    }
]

嵌套路由

嵌套路由，即在 router-view 的组件中，又嵌套了 router-view。也就是说子路由的概念；
在这里插入图片描述
Foo 组件与 Bar 组件之间的路由切换，为父路由切换；
在 Bar 组件中，又有 Bar 的子组件 son1 组件与 son2 组件的切换，称为子路由切换；
二者共同构成嵌套路由；

// Foo 组件
const Foo = {
    template: `
        <div>
            <div>Foo组件</div>
            <button @click="go()">跳转至bar</button>
        </div>
    `,
    methods: {
        go() {
            this.$router.push('/bar/son2');
        },
    }
}

// Bar 组件	
const Bar = {
    template: `
        <div style="margin-left: 40px;">
            <div>Bar组件</div>
            <router-link to="/bar/son1">son1</router-link>
            <router-link to="/bar/son2">son2</router-link>

            <router-view></router-view>
        </div>
    `
}

const son1Component = {
    template: '<div>son1Component</div>'
}

const son2Component = {
    template: '<div>son2Component</div>'
}

// 路由表
const routes = [{
        path: '/',
        redirect: '/foo'
    }, {
        path: '/foo',
        component: Foo
    },
    {
        path: '/bar',
        component: Bar,
        children: [{    // 嵌套路由
                path: '',
                redirect: 'son1'
            },
            {
                path: 'son1',
                component: son1Component
            },
            {
                path: 'son2',
                component: son2Component
            }
        ]
    },
]

多视图

多视图：即同一个路由切换下，多个 router-view 进行切换。

<div id="app">

   <!-- 路由跳转 -->
    <router-link to="/foo">Go to Foo</router-link>
    <router-link to="/bar">Go to Bar</router-link>

    <!-- 跳转引起的刷新，多视图 -->
    <router-view></router-view>
    <router-view name="footer"></router-view>

</div>

 // Foo 组件
const Foo = {
    template: `<div>Foo组件</div>`
}

// Bar 组件
const Bar = {
    template: `<div>Bar组件</div>`
}

const footerComponent = {
    template: '<div>footerComponent</div>'
}

// 路由表
const routes = [{
        path: '/',
        redirect: '/bar'
    },
    {
        path: '/foo',
        component: Foo
    },
    {
        path: '/bar',
        components: {   // 多视图
            'footer': footerComponent,
            'default': Bar
        }
    },
]

路由守卫

监听路由变化，进行权限判断、页面滚动、动画加载等功能；

const router = new VueRouter({
    routes	// 路由表
})

// 页面滚动、动画加载、权限判断等
router.beforeEach((to, from, next) => {
    //console.log(to);
    next();
})

豚豚鼠

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
003-路由

Vue 随笔 -- 路由Vue-router简单使用路由跳转路由跳转传参嵌套路由多视图路由守卫Vue-routervue-router 官网： https://router.vuejs.org/zh/guide/更多的前端项目偏向于单页面应用程序，基于MVVM模式，单页面应用程序跳转不卡顿，切换流畅等；基础知识点包括：路由跳转、路由跳转传参、嵌套路由、多视图、路由守卫等；vue-router 在项目的引入包含两种方式：通过 js 引入<script src="https://unpkg.
复制链接

扫一扫