Vue路由

最新推荐文章于 2024-07-22 08:55:10 发布

玩泥巴--chen

最新推荐文章于 2024-07-22 08:55:10 发布

阅读量102

点赞数

分类专栏：前端文章标签： vue.js

本文链接：https://blog.csdn.net/m0_38030557/article/details/119610335

版权

前端专栏收录该内容

8 篇文章 0 订阅

订阅专栏

简介

vue Router 官方提供的路由管理器。可以很方便的创建单应用界面。注意vue router是依赖vue的，所以要先引入vue再使用vue router。

Vue Router的特性

1. 支持history 和 hash 模式

2. 支持动态路由

3. 支持路由守卫

4. 支持编程式路由和命名路由

5. 支持懒加载

路由基本使用

基本使用

<body>
    <div id="app">
        <li><router-link to="/foo">我是FOO</router-link></li>
        <li><router-link to="/bar">我是BAR</router-link></li>

        <!-- 5.路由占位符，表示要将路由放到哪个位置 -->
        <router-view></router-view>
    </div>
    <script>
        const foo = {
            template: '<div>我是foo</div>'
        }
        const bar = {
            template: '<div>我是bar</div>'
        }
        //  2.创建路由实例
        const router = new VueRouter({
            // 设置history模式
            mode: 'history',
            // 3.配置路由规则
            routes: [
                {path: '/foo', component: foo},
                {path: '/bar', component: bar}
            ]
        })

        new Vue({
            el: '#app',
            data: {

            },
            // 4.挂载路由模块
            router
        })

    </script>
</body>

动态路由

<body>
    <div id="app">
        <router-link to="/foo/sss">sss</router-link>
        <router-link to="/foo/bbb">bbb</router-link>
        <router-view></router-view>
    </div>
    <script>
        const foo = {
            // 通过$route.params 接收参数
            template: `<div>我是foo{{ $route.params.id }}</div>`
        }
        const bar = {
            template: '<div>我是bar</div>'
        }
        const router = new VueRouter({
            routes: [
                // 动态路由使用
                {path: '/foo/:id', component: foo},
                {path: '/bar', component: bar}
            ]
        })

        new Vue({
            el: '#app',
            data: {

            },
            watch: {
                // $route可以监听动态路由变化。
                $route(to,from) {
                    console.log(to)
                    console.log(from)
                }
            },
            router
        })

    </script>

嵌套路由

const bar = {
            template: `<div>我是bar<router-link to="/bar/nav1">nav1</router-link><router-view></router-view></div>`
        }
        const router = new VueRouter({
            routes: [
                // 匹配所有路由，和不存在路由，重定向到/bar中
                {path: '*', redirect: '/bar'},
                {path: '/foo/:id', component: foo},
                {
                    path: '/bar', 
                    component: bar, 
                    // 嵌套路由，添加一个children子路由
                    children: 
                    [
                        //  注意：子路由不需要加/的路径。
                        {path: 'nav1', component: {template: '<div>我是nav1</div>'}}
                    ]
                }
            ]
        })

编程式导航

new Vue({
            el: '#app',
            data: {

            },
            methods: {
                foo() {
                    // 字符串形式
                    // this.$router.push('foo')
                    //  跳转命名的路由
                    // this.$router.push({name: 'foo'})
                    // 命名路由带参，这里地址上是不会显示参数的。
                    this.$router.push({name: 'foo', params: {userId: 133}})
                },
                bar() {
                    //  带查询参数的地址  /bar?userId=133,如果用path，params是不生效的。
                    this.$router.push({path: 'bar', query: {userId: 133}})
                }
            },
            router
        })

路由守卫

全局前置守卫 router.beforeEach

router.beforeEach((to, from,next)=>{
    // to代表即将进入的路由
    // from代表离开的路由
    // next 一定要调用该方法来 resolve 这个钩子
    if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' })
    else next()
})

路由懒加载

const Foo = () => import('./Foo.vue')

玩泥巴--chen

关注

0
点赞
踩
0

收藏

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

简介 vue Router 官方提供的路由管理器。可以很方便的创建单应用界面。注意vue router是依赖vue的，所以要先引入vue再使用vue router。Vue Router的特性 1. 支持history 和 hash 模式 2. 支持动态路由 3. 支持路由守卫 4. 支持编程式路由和命名路由 5. 支持懒加载路由基本使用基本使用<body&gt...
复制链接

扫一扫